避免内联样式 - Mui V5

Question

在我看来，将样式与代码分开会使代码更清晰。对我来说，使用内联样式 (style={{}}) 被认为是一种基本做法。

在 Mui V4 中很简单 - 我刚刚创建了一个样式文件并使用 makeStyles() 和 useStyles() 挂钩将其导入到我的组件代码中。

现在有了 Mui V5 中的新 sx 属性，我不知道如何避免内联样式。有什么想法吗？

Answer 1

你也可以用 sx 做类似的事情。创建一个新的样式文件并在那里定义您的对象。只需在sx 属性中使用它们：

styles.ts：

const gridStyles = {
  backgroundColor: "blue",
  paddingBottom: 2,
  paddingRight: 2,
  marginTop: 2,
  marginLeft: "auto",
  marginRight: "auto",
  maxWidth: 500
};
export default gridStyles;

import gridStyles from './styles';

export default function FullWidthGrid() {
  return (
    <>
      <Grid
        container
        sx={gridStyles}
      </Grid>
  );
}