Css ghi đè quan trọng

Chủ đề chỉ định màu của các thành phần, độ tối của bề mặt, mức độ bóng, độ mờ thích hợp của các phần tử mực, v.v.

Chủ đề cho phép bạn áp dụng tông màu nhất quán cho ứng dụng của mình. Nó cho phép bạn tùy chỉnh tất cả các khía cạnh thiết kế của dự án để đáp ứng các nhu cầu cụ thể của doanh nghiệp hoặc thương hiệu của bạn

Để thúc đẩy tính nhất quán cao hơn giữa các ứng dụng, các loại chủ đề sáng và tối có sẵn để bạn lựa chọn. Theo mặc định, các thành phần sử dụng loại chủ đề nhẹ

nhà cung cấp chủ đề

Nếu bạn muốn tùy chỉnh chủ đề, bạn cần sử dụng thành phần

createTheme({
  vars: { .. },
})

4 để đưa chủ đề vào ứng dụng của mình. Tuy nhiên, đây là tùy chọn;

createTheme({
  vars: { .. },
})

4 dựa vào tính năng ngữ cảnh của React để truyền chủ đề xuống các thành phần, vì vậy bạn cần đảm bảo rằng

createTheme({
  vars: { .. },
})

4 là cha của các thành phần bạn đang cố gắng tùy chỉnh. Bạn có thể tìm hiểu thêm về điều này trong

Biến cấu hình chủ đề

Thay đổi các biến cấu hình chủ đề là cách hiệu quả nhất để khớp MUI với nhu cầu của bạn. Các phần sau đây bao gồm các biến chủ đề quan trọng nhất

Bạn có thể xem phần chủ đề mặc định để xem đầy đủ chủ đề mặc định

biến tùy chỉnh

Khi sử dụng chủ đề của MUI với Hệ thống MUI hoặc bất kỳ giải pháp tạo kiểu nào khác, có thể thuận tiện khi thêm các biến bổ sung vào chủ đề để bạn có thể sử dụng chúng ở mọi nơi. Ví dụ

const theme = createTheme({
  status: {
    danger: orange[500],
  },
});

Bản sao (hoặc $keyC)

CẢNH BÁO.

createTheme({
  vars: { .. },
})

2 là một trường riêng được sử dụng để hỗ trợ các biến CSS. Nó sẽ báo lỗi nếu bạn cố gắng sử dụng nó

createTheme({
  vars: { .. },
})

Bản sao (hoặc $keyC)

Nếu bạn đang sử dụng TypeScript, bạn cũng cần sử dụng cho chủ đề để chấp nhận các giá trị trên

Trình tạo chủ đề

Cộng đồng đã xây dựng các công cụ tuyệt vời để xây dựng một chủ đề

• mui-theme-creator. Một công cụ giúp thiết kế và tùy chỉnh chủ đề cho thư viện thành phần MUI. Bao gồm các mẫu trang web cơ bản để hiển thị các thành phần khác nhau và cách chúng bị ảnh hưởng bởi chủ đề
• Trình tạo bảng vật liệu. Trình tạo bảng Vật liệu có thể được sử dụng để tạo bảng màu cho bất kỳ màu nào bạn nhập vào

Truy cập chủ đề trong một thành phần

Bạn có thể truy cập các biến chủ đề bên trong các thành phần chức năng React của mình bằng cách sử dụng móc nối

createTheme({
  vars: { .. },
})

3

import { useTheme } from '@mui/material/styles';

function DeepChild() {
  const theme = useTheme();
  return {`spacing ${theme.spacing}`};
}

Bản sao (hoặc $keyC)

Lồng ghép chủ đề

nhiều nhà cung cấp chủ đề

Chủ đề bên trong sẽ ghi đè lên chủ đề bên ngoài. Bạn có thể mở rộng chủ đề bên ngoài bằng cách cung cấp một chức năng

API

createTheme({ vars: { .. }, }) 4

Tạo cơ sở chủ đề dựa trên các tùy chọn nhận được. Sau đó, chuyển nó như một chỗ dựa cho

Tranh luận

1. createTheme({
     vars: { .. },
   })
   

   6 (đối tượng). Lấy một đối tượng chủ đề chưa hoàn chỉnh và thêm các phần còn thiếu

2. createTheme({
     vars: { .. },
   })
   

   7 (đối tượng[]). Hợp nhất sâu các đối số với chủ đề sắp được trả lại

import { deepmerge } from '@mui/utils';
import { createTheme } from '@mui/material/styles';

const theme = createTheme(deepmerge(options1, options2));

Bản sao (hoặc $keyC)

trả lại

createTheme({
  vars: { .. },
})

8 (đối tượng). Một đối tượng chủ đề hoàn chỉnh, sẵn sàng để sử dụng

ví dụ

createTheme({
  vars: { .. },
})

0Bản sao (hoặc $keyC)

thành phần chủ đề. sử dụng các tùy chọn chủ đề để xác định các tùy chọn khác

Khi giá trị của một tùy chọn chủ đề phụ thuộc vào một tùy chọn chủ đề khác, bạn nên soạn chủ đề theo các bước

createTheme({
  vars: { .. },
})

1Bản sao (hoặc $keyC)

Hãy nghĩ về việc tạo một chủ đề như một quy trình sáng tác gồm hai bước. đầu tiên, bạn xác định các tùy chọn thiết kế cơ bản;

CẢNH BÁO.

createTheme({
  vars: { .. },
})

9 là một trường riêng được sử dụng để hỗ trợ các biến CSS. Vui lòng sử dụng tên khác cho đối tượng tùy chỉnh

import { useTheme } from '@mui/material/styles'; function DeepChild() { const theme = useTheme(); return {`spacing ${theme.spacing}`}; } 0

Tạo cài đặt kiểu chữ đáp ứng dựa trên các tùy chọn nhận được

Tranh luận

1. createTheme({
     vars: { .. },
   })
   

   8 (đối tượng). Đối tượng chủ đề để nâng cao

2. createTheme({
     vars: { .. },
   })
   

   6 (đối tượng [tùy chọn])

• import { useTheme } from '@mui/material/styles';
  
  function DeepChild() {
    const theme = useTheme();
    return {`spacing ${theme.spacing}`};
  }
  

  3 (mảng[tùy chọn]). Mặc định là

  import { useTheme } from '@mui/material/styles';
  
  function DeepChild() {
    const theme = useTheme();
    return {`spacing ${theme.spacing}`};
  }
  

  4. Mảng các điểm ngắt (số nhận dạng)

• import { useTheme } from '@mui/material/styles';
  
  function DeepChild() {
    const theme = useTheme();
    return {`spacing ${theme.spacing}`};
  }
  

  5 (bool [tùy chọn]). Mặc định là

  import { useTheme } from '@mui/material/styles';
  
  function DeepChild() {
    const theme = useTheme();
    return {`spacing ${theme.spacing}`};
  }
  

  6. Liệu kích thước phông chữ có thay đổi một chút để chiều cao dòng được giữ nguyên và căn chỉnh với lưới chiều cao dòng 4px của Material Design hay không. Điều này yêu cầu chiều cao dòng không có đơn vị trong kiểu của chủ đề

• import { useTheme } from '@mui/material/styles';
  
  function DeepChild() {
    const theme = useTheme();
    return {`spacing ${theme.spacing}`};
  }
  

  7 (số [tùy chọn]). Mặc định là

  import { useTheme } from '@mui/material/styles';
  
  function DeepChild() {
    const theme = useTheme();
    return {`spacing ${theme.spacing}`};
  }
  

  8. Giá trị này xác định cường độ thay đổi kích thước phông chữ. Giá trị càng cao, càng có ít sự khác biệt giữa các kích thước phông chữ trên màn hình nhỏ. Giá trị càng thấp, kích thước phông chữ lớn hơn cho màn hình nhỏ. Giá trị phải lớn hơn 1

• import { useTheme } from '@mui/material/styles';
  
  function DeepChild() {
    const theme = useTheme();
    return {`spacing ${theme.spacing}`};
  }
  

  9 (mảng[tùy chọn]). Mặc định cho tất cả. Các biến thể kiểu chữ để xử lý

trả lại

createTheme({
  vars: { .. },
})

8 (đối tượng). Chủ đề mới với kiểu chữ đáp ứng

ví dụ

createTheme({
  vars: { .. },
})

4Bản sao (hoặc $keyC)

import { deepmerge } from '@mui/utils'; import { createTheme } from '@mui/material/styles'; const theme = createTheme(deepmerge(options1, options2)); 1

CẢNH BÁO. Không sử dụng phương pháp này trong sản xuất

Tạo một chủ đề làm giảm số lượng cảnh báo bên trong

import { deepmerge } from '@mui/utils';
import { createTheme } from '@mui/material/styles';

const theme = createTheme(deepmerge(options1, options2));

2 như

import { deepmerge } from '@mui/utils';
import { createTheme } from '@mui/material/styles';

const theme = createTheme(deepmerge(options1, options2));

3

Yêu cầu

Hiện tại

import { deepmerge } from '@mui/utils';
import { createTheme } from '@mui/material/styles';

const theme = createTheme(deepmerge(options1, options2));

4 không thêm yêu cầu bổ sung

Tranh luận

1. createTheme({
     vars: { .. },
   })
   

   6 (đối tượng). Lấy một đối tượng chủ đề chưa hoàn chỉnh và thêm các phần còn thiếu

2. createTheme({
     vars: { .. },
   })
   

   7 (đối tượng[]). Hợp nhất sâu các đối số với chủ đề sắp được trả lại

trả lại

createTheme({
  vars: { .. },
})

8 (đối tượng). Một đối tượng chủ đề hoàn chỉnh, sẵn sàng để sử dụng

ví dụ

createTheme({
  vars: { .. },
})

2Bản sao (hoặc $keyC)

createTheme({ vars: { .. }, }) 4

Thành phần này lấy một giá trị

createTheme({
  vars: { .. },
})

8 và áp dụng nó cho toàn bộ cây React mà nó bao quanh. Nó tốt nhất nên được sử dụng ở gốc của cây thành phần của bạn