Question

我知道要为Material UI组件设置样式，我应该使用它们的useStyles，例如：

const useStyles = makeStyles(themes => ({
    root: {
        marginTop: '15px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        flexGrow: '0'
    },
    menuButton: {
        color: grey[800],
    },

  }));

但是我不确定为什么。例如，如果要在多个组件上使用相同的CSS，该怎么办？拥有一个单独的css文件会更容易吗？

Answer 1

您可以导出它们并在其他组件中重复使用，这样最终只能使用一个makeStyles函数，您可以将其放置在某些样式的统一文件中。

  export const useStyles = makeStyles(themes => ({
    root: {
        marginTop: '15px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        flexGrow: '0'
    },
    menuButton: {
        color: grey[800],
    },

  }));

您为什么要这样做：它是一个基于主题的组件，当您拥有使用蓝色按钮的全局主题时就可以说出来，但是随后您将其替换为绿色，但保留字体和其他内容从该主题继承或完全丢弃。

此方法可能是基于首选项的（如果您的回购遵循CSS in JS样式并且您不想混淆CSS），但是如果您想在库中强制使用样式化的组件，则可以在包含在组件中的组件。

您可以认为此方法采用themes，然后将修饰符传递给要覆盖使用useStyles类的组件的主题。

话虽如此，您也可以在组件中将其用作CSS类。

Answer 2

否，您可以将其导入其他需要的文件中。

假设您需要在另一个View.jsx示例文件中使用根样式。然后将useStyles导入该View.jsx文件，然后可以在该View.jsx文件中使用其所有类。

ReactJS Material UI组件CSS类，澄清

2 个答案: