Skip to main content

Bài 04-Sử dụng thành phần

Tìm hiểu cách sử dụng styled-components thay vì Emotion với Material UI.Giúp chúng tôi tiếp tục chạyNếu bạn không bận tâm đến quảng cáo liên quan đến công nghệ (không theo dõi hoặc tiếp thị lại) và muốn chúng tôi tiếp tục hoạt động, vui lòng thêm chúng tôi vào danh sách trắng trong trình chặn của bạn.Cảm ơn bạn! ❤️

Tính đến cuối năm 2021, styled-components không tương thích với các dự án Material UI được kết xuất trên máy chủ. Nguyên nhân là do babel-plugin-styled-componentskhông thể hoạt động với styled()tiện ích bên trong @muicác gói. Xem sự cố GitHub này để biết thêm chi tiết.

Chúng tôi thực sự khuyên bạn nên sử dụng Emotion cho các dự án SSR.

Theo mặc định, Material UI sử dụng Emotion để tạo kiểu CSS. Tất cả các thành phần đều dựa vào styled()API để đưa CSS vào trang. API này được hỗ trợ bởi nhiều thư viện tạo kiểu phổ biến, giúp có thể chuyển đổi giữa chúng trong Material UI.

Chúng tôi cung cấp hai gói khác nhau để gói giải pháp tạo kiểu bạn chọn sao cho tương thích với Material UI:

  • @mui/styled-engine: một lớp bao bọc mỏng xung quanh API của Emotion styled()bao gồm các tiện ích cần thiết như <GlobalStyles />thành phần, csstrình keyframetrợ giúp và nhiều hơn nữa. Đây là mặc định và bạn không cần phải cài đặt nó.
  • @mui/styled-engine-sc: một wrapper tương tự, nhưng được thiết kế riêng cho styled-components. Bạn phải cài đặt và triển khai gói này để sử dụng styled-components với Material UI.

Hai gói này triển khai cùng một giao diện, khiến chúng có thể hoán đổi cho nhau.

Cấu hình Bundler​

Theo mặc định, @mui/materialcó @mui/styled-enginephụ thuộc. Để sử dụng styled-components, bạn cần cấu hình bundler của mình để thay thế bằng @mui/styled-engine-sc.

Với sợi len​

Nếu bạn đang sử dụng yarn, bạn có thể cấu hình nó bằng cách sử dụng giải pháp gói:

gói.json

 {
   "dependencies": {
-    "@mui/styled-engine": "latest"
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+  },
 }

Sao chép

Với npm​

Vì giải pháp gói không khả dụng với npm, bạn phải cập nhật cấu hình của bundler để thêm bí danh này. Ví dụ bên dưới cho thấy cách thực hiện việc này với Webpack:

webpack.config.js

 module.exports = {
   //...
+  resolve: {
+    alias: {
+      '@mui/styled-engine': '@mui/styled-engine-sc'
+    },
+  },
 };

Sao chép

Đối với TypeScript, bạn cũng phải cập nhật tsconfig.jsonnhư được hiển thị ở đây:

tsconfig.json

 {
   "compilerOptions": {
+    "paths": {
+      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
+    }
   },
 }

Sao chép

Tiếp theo.js​

tiếp theo.config.js

+const withTM = require('next-transpile-modules')([
+  '@mui/material',
+  '@mui/system',
+  '@mui/icons-material', // If @mui/icons-material is being used
+]);

+module.exports = withTM({
 webpack: (config) => {
   config.resolve.alias = {
     ...config.resolve.alias,
+    '@mui/styled-engine': '@mui/styled-engine-sc',
    };
    return config;
  }
+});

Sao chép

Khả năng tương thích của các phiên bản : Để đảm bảo khả năng tương thích, điều cần thiết là phải căn chỉnh phiên bản chính của @mui/styled-engine-scvới phiên bản của styled-componentsgói bạn đang sử dụng. Ví dụ, nếu bạn chọn styled-componentsphiên bản 5, bạn cần phải sử dụng @mui/styled-engine-scphiên bản 5. Tương tự, nếu bạn thích styled-componentsphiên bản 6, bạn sẽ cần nâng cấp @mui/styled-engine-sclên phiên bản 6, hiện đang ở trạng thái alpha.

Ví dụ sẵn sàng sử dụng​

Chúng tôi cung cấp các ví dụ mẫu về Tạo ứng dụng React với Material UI và các thành phần được tạo kiểu trong cả JavaScript và TypeScript:

@emotion/react, @emotion/styled, và styled-componentslà các phụ thuộc ngang hàng tùy chọn của @mui/material, vì vậy bạn cần tự cài đặt chúng. Xem hướng dẫn Cài đặt để biết thêm thông tin.

5:11:17 AM