使用 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;
  }
+});

即用型示例

我们提供了带有 Material UI 和 styled-components 的 Create React App 的样板示例，包括 JavaScript 和 TypeScript 两种版本