Material-UI-为什么我应该使用makeStyles而不是内联样式? [英] Material-UI - Why should I use makeStyles instead of inline styles?

问题描述

在材料UI 中，有一个 makeStyles 函数可用于获取自定义CSS样式.

In Material-UI, there is the makeStyles function which can be used to get custom CSS-Styling.

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

Should I use it if I am not using a theme in that specific 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个要点:

So there are 3 main points (that I see):

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

1. One way creates classes and references them, the other just uses the object as is.
2. In the first case an object is assigned to the style property which is inline and has a higher priority.
3. In the first example it is important to keep the const outside of the class, so the object is still created only once and won't trigger a rerender.

但是最终的组件看起来完全相同(在我的Firefox中).

But the resulting component looks identical (in my Firefox).

我的问题:

• 是否可以构建一个示例，说明这两种方法导致不同的控制?
• 它是否有性能方面的表现?
• 还有其他区别吗?

推荐答案

在某些情况下，会使用CSS类(例如，通过 withStyles )是必需的:

There are a few scenarios where using CSS classes (e.g. via makeStyles or withStyles) is necessary:

• 如果您想在CSS中使用媒体查询
• 如果要定位伪类(例如输入的外观，同时将其保留在使用自定义组件的位置直接或通过 FormControl 上下文指定 error 道具)

• If you want to use media queries in your CSS
• If you want to target pseudo-classes (e.g. :hover)
• If you are creating a reusable customization of one of the Material-UI components and want to customize some of the classes that are conditionally applied to the element based on props or some other context (e.g. if you want to customize the "error" look of an Input while leaving it up to the places where the custom component is used to specify the error prop either directly or via the FormControl context)

就性能而言，我希望对于大多数用例而言，内联样式会更快.差异是否足够重要取决于您的特定应用程序的许多细节.与我一起工作的团队使用 makeStyles 或 withStyles 来完成我们的大部分造型.

As far as performance concerns, I would expect inline styles to be faster for most use cases. Whether the difference is enough to matter would depend on a lot of specifics regarding your particular application. The team I work with uses makeStyles or withStyles for most of our styling.

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

Inline styles can result in a lot of duplicated CSS in the DOM if a particular component is rendered many times within the document (e.g. list items, table cells, etc.). One nice thing about always using classes is that you can change the CSS for the class in the browser's developer tools and see that change applied throughout all its usages in the document.

这篇关于Material-UI-为什么我应该使用makeStyles而不是内联样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！