ReactJS Material UI组件CSS类，澄清

德瓦玛

我了解要为Material UI组件设置样式，应使用useStyles，例如：

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

  }));

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

里金

您可以导出它们并在其他组件中重用，这样一来，您最终只能获得一个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类。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。