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

Question

在Material-UI 中，有一个makeStyles函数可以用来获取自定义的 CSS-Styling。

如果我不在该特定 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 类（例如 viamakeStyles或withStyles）：

• 如果您想在 CSS 中使用媒体查询
• 如果你想定位伪类（例如:hover）
• 如果您正在创建 Material-UI 组件之一的可重用自定义，并且想要自定义一些基于 props 或其他一些上下文有条件地应用于元素的类（例如，如果您想自定义一个输入，同时将它留给自定义组件用于error直接或通过FormControl上下文指定道具的地方）

就性能问题而言，我希望内联样式在大多数用例中更快。差异是否足够重要取决于您的特定应用程序的许多细节。我工作的团队使用makeStyles或withStyles用于我们的大部分造型。

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