如何用类和CSS模块覆盖样式？
Jaa*_*eek 1 reactjs material-ui css-modules
集中、检查的课程似乎无法正常工作。我需要始终使用 !important 或使用material-ui 提供的jss 样式。例如：
https://codesandbox.io/s/css-modules-nvy8s?file=/src/CssModulesButton.js
CssModulesButton.module.css
.checkboxtest {
color: blue;
}
.checkboxtestworking {
color: blue !important;
}
CssModulesButton.js
import React from "react";
// webpack, parcel or else will inject the CSS into the page
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox/Checkbox";
export default function CssModulesButton() {
return (
<div>
<Checkbox classes={{ checked: styles.checkboxtest }}>testasd</Checkbox>
<Checkbox classes={{ checked: styles.checkboxtestworking }}>
testasd
</Checkbox>
</div>
);
}
索引.js
import React from "react";
import { render } from "react-dom";
import { StylesProvider } from "@material-ui/core/styles";
import CssModulesButton from "./CssModulesButton";
import CssBaseline from "@material-ui/core/CssBaseline";
const App = () => <CssModulesButton />;
render(<App />, document.querySelector("#root"));
除了使用 !important 之外，我无法以任何其他方式覆盖复选框颜色。当使用classes={{focused:styles.focused}}和许多其他方法时，问题仍然存在。
有没有一种方法可以简单地用类覆盖组件而无需 !important ？有时甚至 !important 也不起作用
inb4 我正在使用injectFirst
您在问题中提到injectFirst，尽管您的沙箱示例没有使用它。您应该使用它，因为这将确保 CSS 模块中的 CSS 插入到元素中的 Material-UI CSS 之后<head>。当特异性相同时，后来出现的样式将胜过早期出现的样式。
复选框颜色的默认样式如下：
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main,
'&:hover': {
backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
},
},
'&$disabled': {
color: theme.palette.action.disabled,
},
},
下面是JSS生成的对应CSS：
.MuiCheckbox-colorSecondary.Mui-checked {
color: #f50057;
}
.MuiCheckbox-colorSecondary.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
}
.MuiCheckbox-colorSecondary.Mui-checked:hover {
background-color: rgba(245, 0, 87, 0.04);
}
@media (hover: none) {
.MuiCheckbox-colorSecondary.Mui-checked:hover {
background-color: transparent;
}
}
需要注意的一个重要方面是样式checked是通过两个类完成的。为了覆盖这些样式，您需要相同或更高程度的特异性。
下面是一个覆盖checked复选框颜色的完整工作示例：
index.js（这里重要的部分是<StylesProvider injectFirst>）
import React from "react";
import { render } from "react-dom";
import { StylesProvider } from "@material-ui/core/styles";
import CssModulesButton from "./CssModulesButton";
const App = () => (
<StylesProvider injectFirst>
<CssModulesButton />
</StylesProvider>
);
render(<App />, document.querySelector("#root"));
CssModulesButton.module.css
- 在样式声明中使用两个类 -
checkboxtestCSS 模块类和Mui-checked（Material-UI 为选中状态添加的全局类）
.checkboxtest:global(.Mui-checked) {
color: blue;
}
CssModulesButton.js
import React from "react";
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox";
export default function CssModulesButton() {
return (
<div>
<Checkbox className={styles.checkboxtest} />
</div>
);
}
评论中的后续问题：
你能解释一下为什么我不能使用类吗？不应该
classes={{checked:styles.AnyClass}}成功覆盖样式吗？我明白为什么不可以，但是课程的目的是什么？
您可以使用该classes道具，但在这种情况下没有任何令人信服的理由这样做。只要样式声明相同（使用两个 CSS 类），以下内容也将起作用，以便您具有适当程度的特异性：
<Checkbox classes={{ checked: styles.checkboxtest }} />
至于问题的第二部分（“那么类的目的是什么？”），使用该classes道具有两个主要原因。prop的某些 CSS 类classes会应用于组件内的不同元素，而有些仅在组件处于特定状态时或在组件上使用某些 prop 时才会应用。在本例中，您尝试将这些样式定位为组件的特定状态。在 Material-UI v3 中，您需要使用classesprop 来提供仅适用于状态的类名称checked，但在 Material-UI v4 中切换为对这些状态使用全局类名称（更多详细信息请参见：https ://material-ui.com/customization/components/#pseudo-classes），例如Mui-checked. 这使得通过单个生成的类更容易地定位这些状态（此更改的一个重要驱动因素是使使用 自定义 Material-UI 组件变得更容易styled-components）。
| 归档时间： |
|
| 查看次数： |
5577 次 |
| 最近记录： |