每次我点击刷新时，Material-UI 类名称都会不断变化答案

【问题标题】：Material-UI Class names keep changing every time I hit refresh每次我点击刷新时，Material-UI 类名称都会不断变化
【发布时间】：2021-05-12 23:42:00
【问题描述】：

目前我正在使用 Material-UI 中的文本字段，我想缩小它们。下面是一个类名的例子：

.eKdARe.header .input-容器输入

以下是我在文件中输入更改后的示例，说明我点击刷新后类名会发生什么变化：

.hrLLok.header .input-容器输入

我只想保留一个类名，以便对输入字段进行实际更改。

【问题讨论】：

这是意料之中的。您应该使用styles API 覆盖组件的样式，而不是针对散列类名称。

标签： reactjs typescript material-ui

【解决方案1】：

您应该使用@material-ui/styles 来扩展您的文本字段样式，如下所示：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  button: {
    border: 0,
    borderRadius: 3,
    color: 'white',
    height: 48,
    padding: '0 30px',
    // Other styles here...
  },
});

export default function MyComponent() {
    const classes = useStyles();
    return (
        <div>
            <Button className={classes.button}>My styled boutton</Button>
        </div>
    );
}

通过此链接了解有关文档的更多信息：@material-ui.com/styles

【讨论】：

值得指出的是，如果使用 MUI 组件，添加这个包是多余的，因为它是核心包的一个 dep

【解决方案2】：

我的问题通过安装解决了

使用 npm

npm install @mui/styles

用纱线

yarn add @mui/styles

使用 @mui/styles 而不是 @material-ui/core 解决了我的问题。

您应该使用基本的styles API 来覆盖组件的样式。

【讨论】：