对于React应用程序主题，是否存在material-ui makeStyles与SCSS架构的优势？

Question

我刚刚加入了一个开发React应用程序的团队。我们目前依赖于材料UI，包括makeStyles，来设计应用程序。我的任务之一就是弄清楚我们的全球主题。在我的传统中，我一直依赖于LESS和SCSS来实现应用程序样式和主题架构。

与切换主题架构使用makeStyles相比，坚持使用Material use (除了它已经实现的事实之外)有优势吗？

Answer 1

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

主题的钩子用法：

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

Answer 2

我可以很好地交替使用makeStyles和scss。

但是，我会避免在组件级别混合它们……这可能会让人感到困惑。