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个要点：

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

但是最终的组件看起来完全相同（在我的Firefox中）。

我的问题：

能否构建一个示例，说明这两种方法导致不同的控制？
它在性能方面有什么方面吗？
还有其他区别吗？

Answer 1

在某些情况下，有必要使用CSS类（例如，通过makeStyles或withStyles）：

如果您想在CSS中使用media queries
如果您要定位伪类（例如:hover）
如果您要为Material-UI组件之一创建可重用的自定义，并希望基于prop或其他上下文自定义某些有条件地应用于元素的类（例如，如果要自定义“错误” “ Input的外观，同时将其保留在使用自定义组件直接或通过error上下文指定FormControl道具的地方）

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

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

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

1 个答案: