Reactjs 每次单击“刷新”时，材质UI类名都会不断更改

目前我正在处理材质UI中的文本字段，我想缩小它们。 下面是类名的示例：

.eKdARe.header.input容器输入

以下是我在文件中输入更改后的一个示例，该更改说明了在单击“刷新”后类名的变化：

.hrLLok.header.input容器输入

---

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

您应该使用

@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>
    );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Button”导入按钮；
const useStyles=makeStyles({
按钮：{
边界：0，
边界半径：3，
颜色：'白色'，
身高：48，
填充：“0 30px”，
//这里还有其他款式。。。
},
});
导出默认函数MyComponent（）{
const classes=useStyles（）；
返回(
我的花束
);
}

---

通过此链接了解有关文档的更多信息：

这是意料之中的。您应该使用来覆盖组件的样式，而不是针对哈希类名称。值得指出的是，如果使用MUI组件，则添加此包是多余的，因为它是核心包的一个dep。您是对的，我编辑了答案。