reactjs MUI v5 -从零部件文件中分离样式

hrysbysz 于 2022-12-03 发布在 React

关注(0)|答案(3)|浏览(170)

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

reactjs

来源：https://stackoverflow.com/questions/69550535/mui-v5-seperate-styling-from-component-file

3条答案

按热度按时间

sdnqo3pr1#

v5中推荐的样式API是styled() / sx prop。如果你使用styled，你可以通过创建一个可重用的样式组件来分离样式代码。sx prop更适合内联一次性样式，所以在这个场景中它不是最好的选择：
第一个
除此之外，您还可以在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]}`,
          },
        },
      ],
    },
  },
});

赞(0）回复(0）举报 2022-12-03

3j86kqsm2#

建议使用sx或styled。
文件：https://mui.com/system/basics/

赞(0）回复(0）举报 2022-12-03

jchrr9hc3#

我会推荐CSS模块或纯CSS，因为其他样式解决方案可能会在不久的将来被弃用，一个很好的例子是makeStyle，它现在被认为是一个遗留样式解决方案。
您可以在Mui的网页中的样式库互操作性部分找到更多信息。

赞(0）回复(0）举报 2022-12-03