如何使用类和CSS模块覆盖样式？

debugcn 发表于 Dev

贾内克

重点突出的检查类似乎无法正常工作。我需要始终使用！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>
  );
}

index.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之外，我无法以其他任何方式覆盖Checkbox颜色。使用classes = {{focused：styles.focused}}和其他许多类时，问题仍然存在。

有没有一种方法可以用没有！important的类简单地覆盖组件？有时甚至！important都不起作用

使用injectFirst的inb4 im

瑞安·科格斯威尔（Ryan Cogswell）

您injectFirst在问题中提到了您，尽管您的沙盒示例未使用它。您应该使用它，因为这将确保将CSS模块中的CSS插入到<head>元素中的Material-UI CSS之后。当特异性相同时，以后出现的样式将取代以前的样式。

复选框颜色的默认样式如下：

  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

在样式声明中使用两个类checkboxtest-CSS模块类和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。该classes道具的一些CSS类将应用于组件内的不同元素，而有些仅在组件处于特定状态或组件上已使用某些道具时才应用。在这种情况下，您尝试将这些样式定位为组件的特定状态。在Material-UI的v3中，您将需要使用classesprop提供仅适用于该checked状态的类名，但是在v4中，Material-UI切换为对这些状态使用全局类名（更多详细信息，请参见：https ：//material-ui.com/customization/components/#pseudo-classes），例如Mui-checked。这使得通过单个生成的类更容易将这些状态作为目标（此更改的一个主要推动因素是，使使用可以更轻松地自定义Material-UI组件styled-components）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何使用类和CSS模块覆盖样式？

如何使用类和CSS模块覆盖样式？

如何使用jquery覆盖类的CSS样式？

如何使用样式组件覆盖 CSS 类

CSS模块，React和覆盖CSS类

如何覆盖样式组件中的 css 类

如何重用和覆盖CSS样式？

如何在Create React App中使用CSS模块覆盖Bootstrap样式

如何防止外部CSS添加和覆盖ReactJS组件样式

如何防止外部CSS添加和覆盖ReactJS组件样式

如何在：before伪类中使用！important覆盖样式

如何在create-react-app和Typescript中使用CSS模块覆盖Material-UI？

如何从 div 样式覆盖 css

如何覆盖CSS类？

覆盖内联-使用CSS样式

使用：not和bootstrap覆盖样式

嵌套列表CSS覆盖样式（#id +类）

使用CSS模块如何定义全局类

如何仅覆盖标题行的CSS类，但保留表的样式类的其余表？

如何使用 jQuery 查找具有特定类和 CSS 样式的元素？

使用CSS模块如何定义多个样式名称

如何从父类中删除和覆盖CSS属性？

在 Shopify 和 Liquid 中覆盖 CSS 样式

CSS !important 和内联样式被覆盖

从节点模块覆盖样式

覆盖模块中的全局 CSS 样式不起作用

如何覆盖主要反应组件CSS样式？

如何覆盖CSS中的计算样式？

如何覆盖Bootstrap的默认CSS样式规则

如何使用C＃覆盖默认的CSS类

如何使用CSS覆盖所有类的背景颜色？