reactjs - Material-UI - 为什么我应该使用 makeStyles 而不是内联样式？

Question

在 Material-UI ，有 makeStyles 函数可用于获取自定义 CSS 样式。

如果我没有在该特定 CSS 中使用主题，我应该使用它吗？

例如:

import React from "react";
import { TextField, Paper, Button, Box } from "@material-ui/core";

const classes = {
  paper: {
      backgroundColor: "#eee",
      marginLeft: "30%",
       marginRight: "30%"
  },
  textField: {
      backgroundColor: "#fff"
  },
  button: {
      backgroundColor: "green",
      marginLeft: 20
  }
};

const Ohne = () => {
  console.log(classes);
  return (
      <Paper style={classes.paper}>
      <Box>
          <TextField style={classes.textField} />
          <Button style={classes.button}>abc</Button>
      </Box>
      </Paper>
  );
};

export default Ohne;

该对象是:

{
    "paper": {
        "backgroundColor": "#eee",
        "marginLeft": "30%",
        "marginRight": "30%"
    },
    "textField": {
        "backgroundColor": "#fff"
    },
    "button": {
        "backgroundColor": "green",
        "marginLeft": 20
    }
}

对比

import React from "react";
import { makeStyles } from "@material-ui/styles";
import { TextField, Paper, Button, Box } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  paper: {
      backgroundColor: "#eee",
      marginLeft: "30%",
      marginRight: "30%"
  },
  textField: {
      backgroundColor: "#fff"
  },
  button: {
      backgroundColor: "green",
      marginLeft: 20
  }
}));

const Mit = () => {
  const classes = useStyles();
  console.log(classes);
  return (
      <Paper className={classes.paper}>
      <Box>
          <TextField className={classes.textField} />
          <Button className={classes.button}>abc</Button>
      </Box>
      </Paper>
  );
};

export default Mit;

该对象是:

{
    "paper": "makeStyles-paper-85",
    "textField": "makeStyles-textField-86",
    "button": "makeStyles-button-87"
}

所以有 3 个要点(我认为):

1. 一种方法创建类并引用它们，另一种方法只是按原样使用对象。
2. 在第一种情况下，对象被分配给内联且具有更高优先级的 style 属性。
3. 在第一个示例中，将 const 保留在类之外非常重要，因此该对象仍然只创建一次，并且不会触发重新渲染。

但是生成的组件看起来是相同的(在我的 Firefox 中)。

我的问题:

• 能否构建一个示例来说明这两种方法会产生不同的控制？
• 有任何性能方面的问题吗？
• 还有其他差异吗？

Answer 1

在某些情况下，需要使用 CSS 类(例如通过 makeStyles 或 withStyles ):

• 如果您想使用media queries在你的 CSS 中
• 如果您想定位伪类(例如 :hover )
• 如果您正在创建 Material-UI 组件之一的可重用自定义，并且想要自定义一些基于 props 或其他上下文有条件地应用于元素的类(例如，如果您想要自定义“错误” “Input 的外观，同时将其保留在使用自定义组件直接或通过 FormControl 上下文指定 error 属性的位置)

就性能而言，我希望内联样式对于大多数用例来说会更快。差异是否足够重要取决于有关您的特定应用程序的许多细节。与我合作的团队在大部分样式中使用 makeStyles 或 withStyles。

如果某个特定组件在文档中多次呈现(例如列表项、表格单元格等)，内联样式可能会导致 DOM 中出现大量重复的 CSS。始终使用类的一个好处是，您可以在浏览器的开发人员工具中更改类的 CSS，并查看在文档中的所有用法中应用的更改。