Trong MUI4, tôi có thể ghi đè mã kiểu ban đầu. Nhưng bây giờ trong phiên bản 5, tôi không thể có hành vi tương tự
const theme = createTheme[{
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontSize: '1rem',
},
},
},
},
}];
Tôi nhận được kết quả với mã đầu ra CSS dư thừa
font-size: 0.875rem; // initial Button value
font-size: 1rem; // my override
Hành vi dự kiến 🤔
Nó phải được hợp nhất để ghi đè chứ không phải thêm vào dưới cùng
...
font-size: 1rem;
Vài tuần trước - tôi đã kiểm tra trang demo của bạn [https. //mui. com/customization/theme-components/#global-style-overrides] Tôi nhận thấy [trong devtools] rằng nó hoạt động như tôi muốn - nhưng bây giờ nó đã thay đổi hành vi
nhập "reac-date-picker/dist/DatePicker. css"; // sau này, bạn có thể nhập @emotion // https. //cảm xúc. sh/docs/@emotion/css#global-styles nhập { injectGlobal } từ "@emotion/css"; . Reac-date-picker { /* viết CSS ghi đè của bạn tại đây */ chiều rộng. 100px;Chúng tôi cần nhập nút từ trang web MUI. Vì vậy, chỉ cần truy cập liên kết được đính kèm bên dưới và sao chép dòng Nút nhập
Thành phần nút phản ứng - MUI
Các nút cho phép người dùng thực hiện hành động và đưa ra lựa chọn chỉ bằng một lần nhấn. Các nút truyền đạt các hành động mà người dùng có thể…
mui. com
Quay lại IDE của bạn và trong thư mục src/components/common thêm CommonButton, bên trong nó thêm tệp có cùng tên. Giả lập thành phần chức năng bằng cách sử dụng phím tắt rafce, dán dòng nút nhập và bạn sẽ nhận được kết quả như thế này
Nếu bạn xem bảng điều khiển ví dụ mà chúng tôi muốn tạo lại [màn hình ngay bên dưới]. Bạn sẽ nhanh chóng thấy rằng chúng tôi có thể sử dụng lại CommonButton ít nhất hai lần chỉ trên trang xác thực [ nút Add user & Web setup]
Quay lại nút MUI website, kéo xuống hết link API và mở lên [hoặc click vào link đính kèm bên dưới]. Trang này chứa các đạo cụ có sẵn và API CSS
API nút - MUI
Tài liệu API cho thành phần Nút phản ứng. Tìm hiểu về các đạo cụ có sẵn và API CSS. Bạn có thể tìm hiểu về…
mui. com
Đã đến lúc thêm đạo cụ vào thành phần CommonButton. chúng tôi muốn thêm
- màu — với chỗ dựa này, chúng tôi có thể tự động thay đổi màu cho các Nút của mình. Màu đang mong đợi một chuỗi, nó sẽ hiển thị
primarylàm mặc định - bị vô hiệu hóa - điều này có thể hữu ích với loại nút gửi bên trong xác thực biểu mẫu [f. e. nếu đầu vào của biểu mẫu trống, thì người dùng không thể gửi biểu mẫu, sau khi xác thực thành công, sau đó đặt tắt thành sai]. Đã tắt đang mong đợi một boolean, nó được đặt thành
falselàm mặc định - kích thước - chúng ta có thể kiểm soát kích thước của nút. Nó đang mong đợi một chuỗi và theo mặc định, nó được đặt là
0font-size: 0.875rem; // initial Button value font-size: 1rem; // my override - biến thể - chúng tôi có thể xác định biến thể nào của nút mà chúng tôi muốn sử dụng. Nó đang mong đợi một chuỗi và nó được đặt thành
1 làm mặc địnhfont-size: 0.875rem; // initial Button value font-size: 1rem; // my override - sx — chỗ dựa hệ thống cho phép xác định các ghi đè hệ thống cũng như các kiểu CSS bổ sung. Nó mong đợi nhiều giá trị, nó không có giá trị mặc định
Khi các đạo cụ được thêm vào, bạn sẽ có một cái gì đó tương tự như thế này
Đảm bảo tên thành phần của bạn bắt đầu bằng chữ in hoa, không giống tên của tôi lol
Thành phần nút có thể tái sử dụng của chúng tôi đã hoàn thành. Chúng tôi có thể nhập nó trong Xác thực. js và chơi xung quanh với các đạo cụ. Tôi chỉ xác định kích thước và biến thể và thêm văn bản khi còn nhỏ
Bây giờ tôi sẽ chỉ cho bạn cách ghi đè các kiểu Nút mặc định bằng sx prop
Ghi đè các kiểu MUI bằng cách sử dụng sx propĐối với CommonButton hiện có, chỉ cần thêm rafce0 và ngay bên dưới hàm rafce1, chúng ta có thể tạo đối tượng rafce2 và thêm một số JSS. Khi tôi đang chơi với các phong cách, rafce2 của tôi bây giờ trông như thế này
Bây giờ bạn đã biết cách sử dụng chỗ dựa rafce4, vì vậy chúng tôi có thể định kiểu các nút rafce5 & rafce6 cho phù hợp với ví dụ về bảng điều khiển mà chúng tôi đang cố gắng làm theo. Chúng tôi cần sao chép thành phần CommonButton và như bạn đã biết, chúng có các kiểu hoàn toàn khác nhau và đó là nơi chúng tôi có thể sử dụng các đạo cụ biến thể của mình. Một trong số chúng phải là rafce7 trong khi cái kia phải là rafce8
Tôi sẽ bỏ qua phần thêm JSS vào đối tượng rafce2 vì tôi không nghĩ ở giai đoạn này tôi nên giải thích fontSize hoặc borderRadius làm gì. JSS có thể được tìm thấy ngay bên dưới
Vì vậy, bạn có thể thấy đối tượng rafce2 đang nhắm mục tiêu tất cả các nút và có một số bộ chọn lớp cho các biến thể của nút nên tôi có các kiểu khác nhau cho rafce8 và rafce7 btn
Điều này rất hữu ích khi bạn muốn xác định kiểu trên toàn cầu cho các thành phần MUI của mình. Bạn cũng có thể xác định màu mới [sử dụng đối tượng bảng màu], đặt hoặc thay đổi quy tắc truy vấn phương tiện, v.v.
Để bật chủ đề trong ứng dụng của bạn, hãy truy cập chủ đề MUI [liên kết bên dưới] và sao chép dòng nhập ThemeProvider. Sau đó, chuyển đến tệp Add user3 và bọc nó xung quanh ứng dụng của bạn
Chủ Đề - MUI
Tùy chỉnh MUI với chủ đề của bạn. Bạn có thể thay đổi màu sắc, kiểu chữ và hơn thế nữa. Chủ đề chỉ định màu…
mui. com
Sau khi nhập và bọc nó sẽ trông như thế này
Sau đó, chúng ta nên tạo một tệp nơi chúng ta có thể xác định các quy tắc toàn cầu của mình. Vì vậy, trong Add user4, hãy tạo một tệp Add user5
Quay trở lại trang web theo chủ đề MUI và sao chép phần nhập Add user6 hoặc chỉ sao chép dòng do tôi cung cấp. Add user7 Dán nó vào Add user5 Sau đó, chúng ta có thể sao chép một ví dụ về phong cách toàn cầu giả từ trang web của MUI, vì vậy hãy truy cập https. //mui. com/customization/theme-components/ và sao chép đoạn mã đầu tiên, dán vào Add user5
Bây giờ thay đổi Web setup0 thành Web setup1 Bây giờ mã của bạn sẽ trông như thế này
Đoạn mã này đã đặt các quy tắc CSS cho Kích thước phông chữ của Nút. Điều quan trọng là phải làm theo tài liệu của MUI. Để chọn và thay đổi kiểu của thành phần, bên trong Add user6 của bạn, bạn phải xác định đối tượng Web setup3, sau đó đặt tên cho thành phần, trong trường hợp này là Web setup4, sau đó thêm đối tượng Web setup5, sau đó nhắm mục tiêu vị trí, đối với nút, nó có thể được phác thảo hoặc chứa
Điều còn lại phải làm để nó hoạt động — chúng ta phải liên kết Web setup7 với Web setup8. Vì vậy, hãy quay lại ________ 53 và chỉ cần thêm _______ 70 , hãy đảm bảo Chủ đề trang tổng quan của bạn được nhập. Dòng sẽ trông như thế này bây giờ
Hãy nhớ rằng chúng ta vẫn đang sử dụng đạo cụ rafce4 để ghi đè kiểu cho thành phần CommonButton. Đạo cụ SX được ưu tiên hơn kiểu toàn cầu, vì vậy nếu có sx prop & kiểu toàn cầu, thì đạo cụ sx sẽ luôn ghi đè kiểu toàn cầu
tạoTheme - bảng màu
Bạn có thể xác định các màu khác nhau và ghi đè các màu primary hoặc CommonButton4 mặc định của MUI bằng các giá trị của riêng bạn
Quay trở lại Add user5 của bạn và ngay sau dấu ngoặc đóng Web setup3, thêm đối tượng CommonButton7, thêm đối tượng CommonButton8 vào bên trong rồi lồng khóa primary và giá trị hex mà bạn chọn, tôi đã sử dụng primary0 để mã của bạn bây giờ trông như thế này
Bây giờ nút của bạn có primary1 sẽ cập nhật màu của nó
Nếu bạn muốn tìm hiểu thêm về CommonButton7 của chủ đề, chỉ cần truy cập trang tài liệu
Bảng Màu - MÙI
Bảng màu cho phép bạn sửa đổi màu sắc của các thành phần cho phù hợp với thương hiệu của bạn. Chủ đề tiết lộ những điều sau đây…
mui. com
createTheme — họ phông chữ
Bạn có thể thay đổi fontFamily, tự động thiết lập phản hồi cho phông chữ của mình hoặc thậm chí thêm phông chữ tự lưu trữ. Nhưng tôi sẽ chỉ nói ngắn gọn ở đây. Sắp tới mình định ra video dành riêng cho phông chữ MUI, mong các bạn chú ý theo dõi
Sao chép mảng chuỗi có tên phông chữ cùng với primary3. Đoạn mã này có thể được sao chép từ https. //mui. com/tuỳ chỉnh/kiểu chữ/
Sau đó, chỉ cần dán lại vào Web setup7 của bạn, lưu và làm mới trình duyệt của bạn. Khi bạn kiểm tra thành phần Nút, bạn sẽ nhận thấy rằng họ phông chữ đã bị ghi đè bởi bộ phông chữ mới. Vì vậy, tệp của bạn sẽ trông giống như tệp của anh ấy bây giờ
createTheme - giãn cách
Về cơ bản, đây là một công cụ trợ giúp để tạo khoảng cách nhất quán giữa các phần tử. MUI đang sử dụng hệ số tỷ lệ 8px được khuyến nghị theo mặc định nhưng bạn có thể thay đổi hệ số này trong ________ 67 của mình
Để tìm hiểu thêm về khoảng cách, chỉ cần truy cập
Giãn cách - MUI
Sử dụng chủ đề. khoảng cách[] trợ giúp để tạo khoảng cách nhất quán giữa các thành phần của giao diện người dùng của bạn. MUI sử dụng 8px được đề xuất…
mui. com
createTheme - điểm dừng
Các điểm dừng được sử dụng nội bộ trong các thành phần khác nhau để làm cho chúng phản hồi nhanh, nhưng bạn cũng có thể tận dụng chúng để kiểm soát bố cục ứng dụng của mình thông qua thành phần Grid
Sẽ không xác định các điểm ngắt ở đây, nhưng nếu bạn muốn tìm hiểu thêm về chúng, chỉ cần truy cập
Breakpoints - MUI
API cho phép sử dụng các điểm dừng trong nhiều ngữ cảnh khác nhau. Để có trải nghiệm người dùng tối ưu, material design…
mui. com
Đó là nó. Bây giờ bạn đã biết cách thêm chủ đề MUI toàn cầu vào ứng dụng của mình, ghi đè kiểu của thành phần bằng cách sử dụng SX prop cũng như cách thêm và tùy chỉnh thành phần nút có thể tái sử dụng