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，而是像这样设置variantprop:

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

可以使用createTheme创建自定义变体。有关更多细节，请参阅此回答。请注意，目前并非所有组件都支持此特性:

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

Answer 2

我推荐CSS模块或纯CSS，因为其他样式解决方案可能会在不久的将来被弃用，一个很好的例子是makeStyle，它现在被认为是一个遗留样式解决方案。

您可以在样式库互操作性下的Mui网页中找到更多信息部分。

Answer 3

建议使用sx或styled。

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