MUI v5 - 将样式与组件文件分开

Question

我想将样式与 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 中将样式和组件分离到不同文件中的正确方法是什么？

Answer 1

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

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

export Div;

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

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

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

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

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

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