Question

我刚刚加入了一个开发React应用程序的团队。目前，我们依靠Material UI（包括makeStyles）来为应用设置样式。我的任务之一是保持我们的全球主题。按照我的传统，我依靠LESS和SCSS来实现应用程序样式和主题体系结构。

坚持使用Material UI makeStyles（除了已经实现的事实），而不是切换主题体系结构以使用SCSS是否有优势？

Answer 1

我可以互换使用makeStyles和sass（CSS模块，例如my-component.module.sass）。

基本上，当我需要强大的功能时，我将使用makeStyles（带有npm我的类名），而当它是一个简单的组件时，则使用一个简单的sass文件（请考虑一些没有交互功能的模式，只需单击一个按钮）。当然可以使用makeStyles做到这一点，但我在项目中混用这两种方法确实看不到问题（有些人可能会反对，但有些人会感激）。我喜欢自由。但是，我会避免在组件级别上混合使用它们……这可能会造成混淆。

我还在我的variables.sass文件中使用:export块，以便我的ThemeContext或makeStyles可以使用它们。

Answer 2

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

使用主题挂钩：

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

对于React应用主题，material-ui makeStyles与SCSS架构相比有优势吗？

2 个答案: