Material UI Button 刷新页面后失去样式

Question

由于没有人回答我的问题（材质 UI 按钮在页面刷新后失去样式）我再次询问，这次包括 CodeSandbox：https://codesandbox.io/s/bold-resonance-8c8pz?file =/src/components/style/Login-styling.js

重现问题的步骤： 1-更改“Login.styling.js”中按钮的值（只是为了让反应更新页面），现在按钮就是您设置的颜色。
2-刷新页面（按钮不再跟随样式）

Answer 1

JSS 按需创建样式的方式，Button 组件的核心样式会覆盖您使用

makeStyles

定义的样式，因为组件是在自定义样式之后导入的。如果您在开发工具中检查该元素，您可以看到

.MuiButton-root

样式覆盖了生成的类

.makeStyles-button-2

下的样式——两个单类 CSS 选择器具有相同的特异性，因此最后出现的一个最终获胜.

要解决此问题，您只需重新排序导入，以便在

useStyles

和其余 MUI 组件之后导入

Button

。

https://codesandbox.io/s/laughing-lamport-0i1zt?file=/src/components/Login.js

（^我不知道你想用“禁用”按钮背景颜色来实现什么目的，所以为了演示，我在这里使用了主色调）

Answer 2

我是 mui 新手，我的按钮失去了背景颜色。因为mui生成了一个layout.css文件。它有以下块...

/*
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Remove default button styles.
*/
 
button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
}

我不知道为什么会发生这种情况，我的意思是页面前一天还很完美，今天却发生了......