Reactjs 材质UI-为什么我应该使用makeStyles而不是内联样式？

在中，有

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;

vs

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;

因此，有三个要点（我看到）：

一种方法创建类并引用它们，另一种方法只是按原样使用对象

在第一种情况下，对象被指定给

样式

属性，该属性是内联的，具有更高的优先级

在第一个示例中，重要的是将

const

保持在类之外，因此对象仍然只创建一次，不会触发重新渲染器

但是结果组件看起来完全相同（在我的Firefox中）

我的问题是:

• 如果这两种方法导致不同的控制，是否可以构建一个示例
• 它有任何性能方面吗
• 还有其他区别吗

---

有一些场景需要使用CSS类（例如，通过或）：

• 如果您想在CSS中使用
• 如果您希望以伪类为目标（例如）
• 如果您正在创建一个Material UI组件的可重用自定义，并且希望自定义一些基于道具或其他上下文有条件应用于元素的类（例如，如果您希望自定义“错误”查看时，将其保留在使用自定义组件直接或通过

  FormControl

  上下文指定

  错误

  道具的位置）

就性能而言，我希望内联样式在大多数用例中更快。差异是否足够重要取决于您的特定应用程序的许多细节。与我一起工作的团队使用

makeStyles

或

withStyles

进行大多数样式设计

---

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

查看如何使用

类将有助于您了解
类。我看不出结果控件在这两种情况下是如何看起来相同的，除非它在这两种情况下都没有任何效果（即，如果您在
类中没有任何内容，那么它看起来是一样的）。因此，在使用它并使用这两种选项几个月后，我发现你的最后一句话对日常工作最有用/影响最大。将一个类分配给所有相关元素，并在开发工具中测试更改，只需节省开发时间（避免重建，并重新导航到进行更改的页面）。谢谢
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"
}