MUI v5 - 从组件文件中分离样式答案

【问题标题】：MUI v5 - Seperate styling from component fileMUI v5 - 从组件文件中分离样式
【发布时间】：2021-10-13 06:11:20
【问题描述】：

我想在 MUI v5 中将样式与组件文件分开。我在 v4 中的做法是像这样使用makeStyles：

Page.style.js:

import { makeStyles } from "@material-ui/core";

export const useStyles = makeStyles({
  root: {
    background: "white",
  },
});

Page.js:

import React from "react";
import useStyles from "./Page.style";

const Page = () => {
  const classes = useStyles();
        
  return (
    <div className={classes.root}></div>
  )
}

makeStyles 现在是旧版，我听说下一个版本将弃用它。在 v5 中将样式和组件分成不同文件的正确方法是什么？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

v5 中推荐的样式 API 是 styled()/sx prop。如果你使用styled，你可以通过创建一个可重用的样式组件来分离样式代码。 sx 属性更适合内联一次性样式，因此在这种情况下使用它不是最佳选择：

const Div = styled('div')({
  background: "white",
});

export Div;

import React from "react";
import { Div } from "./Div";

const Page = () => {
  return (
    <Div />
  )
}

除此之外，您还可以在 MUI v5 中使用variant。它的工作方式是您创建自定义样式并为其分配一个名为 variant 的名称，因此您无需像以前那样指定 className，而是像这样设置 variant 属性：

<Button variant="myCustomVariant">
  Button
</Button>

可以使用createTheme 创建自定义变体。有关更多详细信息，请参阅this 答案。请注意，目前，并非所有组件都支持此功能：

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'myCustomVariant' },
          style: {
            textTransform: 'none',
            border: `2px dashed grey${blue[500]}`,
          },
        },
      ],
    },
  },
});

【讨论】：

非常感谢！我发现 styled() 道具很适合。我只是不知道如何用打字稿来实现它而不会出错。
@YahliGi 您可以添加关于该问题的另一个问题（请先在 Stackoverflow 上搜索重复内容）。
谢谢，成功了！

【解决方案2】：

建议使用sx 或styled。

文档：https://mui.com/system/basics/

【讨论】：