对于 React 应用程序主题，material-ui makeStyles 与 SCSS 架构相比是否有优势？答案

【问题标题】：For a React app theme, is there an advantage of material-ui makeStyles vs. SCSS architecture?对于 React 应用程序主题，material-ui makeStyles 与 SCSS 架构相比是否有优势？
【发布时间】：2020-04-28 23:38:54
【问题描述】：

我刚刚加入了一个开发 React 应用程序的团队。我们目前依靠 Material UI，包括 makeStyles，来为应用设置样式。我的任务之一是确定我们的全球主题。在我的传统中，我依赖 LESS 和 SCSS 来实现应用样式和主题架构。

与切换主题架构以使用 SCSS 相比，坚持使用 Material UI makeStyles（除了它已经实现的事实）是否有优势？

【问题讨论】：

标签： reactjs sass material-ui

【解决方案1】：

我可以互换使用 makeStyles 和 scss。

但是，我会避免在组件级别混合它们...这可能会造成混淆。

【讨论】：

感谢 Bobby 的比较，感谢您解释如何组合这些工具。

【解决方案2】：

makeStyles 是使用基于主题的 UI 的好方法。它允许您使用常用属性和方法来生成基于样式的配置变量。

Hook 与主题的用法：

const useStyles = makeStyles((theme:MyCustomTheme)=>{
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: theme.myBorder,
    borderRadius: 3,
    boxShadow: theme.shaodws.boxShadowPrimary,
    color: theme.colors.primary,
    height: theme.size(1),
    padding: '0 30px',
  },
});

export default function MyCustomThemeButton() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

你也可以在实现钩子时提供自定义道具：

const useStyles = makeStyles((theme:MyCustomTheme)=>{
  root: (props) => ({
    border: props.hasBorder ? theme.myBorder : 'none',
    color: props.textColor || theme.color.text.pirmary
  })
});

export default function MyCustomThemeButton(props) {
  const [active, setActive] = useState(false);
  const classes = useStyles({
    hasBorder: props.isOutsideBox,
    textColor: active ? "red" : "yellow"
  });
  return <Button className={classes.root}>Hook</Button>;
}

要阅读有关该主题的更多信息：Material UI styles

【讨论】：

我接受这个答案是因为它给出了当 mui 更有利时的特定用例，即基于主题的 UI。对了！我感觉合理。还要感谢这些有用的示例，说明如何充分利用 mui。