Question

我正在一个React网站上尝试使用material-ui组件。我发现material-ui建议将styles放在组件的classes属性中。每个组件都可以使用className={...}来采用样式。

...
return (
      <div className={classes.root}>
 ...

如果我选择使用material-ui，是否必须遵循这种设计？还是可以分别创建sass文件并将其导入每个组件中？如果这样做，是否违反material-ui设计？还是我会错过任何material-ui功能？

Answer 1

如果样式是特定于组件的，则可以将样式保留在该组件中，并像完成操作一样使用类。

如果样式或功能在各个组件之间共享，则最好将其导入。

由于css-in-js的普及，Material UI已朝material ui css in js方法发展。

styled components库是最早采用这种方法的库之一，并且由于开发人员喜欢利用标记模板文字的方法而变得流行。它与React很好地结合在一起。

有3种不同的API，看起来您正在使用Hook API

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

您还可以使用样式化组件API。材质UI的下方是example，它在组件中应用样式，如果样式根据传入的条件（例如传递的道具）而改变，这将很有用。在这种情况下，将逻辑封装在其中组件，而不是导入和外部类。

import React from 'react';
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

// Like https://github.com/brunobertolini/styled-by
const styledBy = (property, mapping) => props => mapping[props[property]];

const MyButton = styled(({ color, ...other }) => <Button {...other} />)({
  background: styledBy('color', {
    red: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    blue: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
  }),
  border: 0,
  borderRadius: 3,
  boxShadow: styledBy('color', {
    red: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    blue: '0 3px 5px 2px rgba(33, 203, 243, .3)',
  }),
  color: 'white',
  height: 48,
  padding: '0 30px',
});

function AdaptingStyledComponents() {
  return (
    <div>
      <MyButton color="red">Red</MyButton>
      <br />
      <br />
      <MyButton color="blue">Blue</MyButton>
    </div>
  );
}

export default AdaptingStyledComponents;

在这种情况下，最好将样式保留在该组件内。因此，总的来说，这是在导入共享样式和应用本地样式之间取得平衡。

在material-ui react组件中使用类样式是一种好的设计吗？

1 个答案: