使用 styled-components

了解如何在 Material UI 中使用 styled-components 取代 Emotion。

預設情況下，Material UI 使用 Emotion 來產生 CSS 樣式。所有組件都依賴 styled() API 將 CSS 注入到頁面中。此 API 受到多個熱門樣式庫的支援，這使得在 Material UI 中可以切換它們。

我們提供兩個不同的套件來封裝您選擇的樣式解決方案，以與 Material UI 相容

@mui/styled-engine：Emotion 的 styled() API 的輕薄封裝器，其中包含必要的工具程式，例如 <GlobalStyles /> 組件、css 和 keyframe 輔助程式等等。這是預設設定，您無需安裝。
@mui/styled-engine-sc：類似的封裝器，但專為 styled-components 量身打造。您必須安裝並實作此套件，才能將 styled-components 與 Material UI 搭配使用。

這兩個套件實作相同的介面，因此可以互換。

Bundler 設定

預設情況下，@mui/material 將 @mui/styled-engine 作為依賴項。若要使用 styled-components，您需要設定您的 bundler，以將其替換為 @mui/styled-engine-sc。

使用 yarn

如果您使用 yarn，則可以使用套件解析來進行設定

package.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"
+  },
 }

使用 npm

由於 npm 不提供套件解析，您必須更新 bundler 的設定以新增此別名。以下範例說明如何使用 webpack 執行此操作

webpack.config.js

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

對於 TypeScript，您還必須更新 tsconfig.json，如此處所示

tsconfig.json

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

Next.js

next.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;
  }
+});

現成可用的範例

我們提供了使用 Create React App、Material UI 和 styled-components 的範例程式碼，包含 JavaScript 和 TypeScript 兩種版本