在反应js中覆盖css样式答案

【问题标题】：Override css styles in react js在反应js中覆盖css样式
【发布时间】：2022-01-10 12:03:53
【问题描述】：

我使用 ant 设计库在 React 中创建了一个应用程序。在我的 CSS 文件中，我添加了一些基本样式：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

我希望这些样式应该覆盖所有样式，但它们不会覆盖 antd 样式。检查控制台中的p 标签，我注意到这些样式：

 {
    margin-top: 0;
    margin-bottom: 1em;
} /// comes from antd.css

覆盖我以前的样式。如何在不使用!important 的情况下解决此问题（使我的样式覆盖所有样式）？
演示：https://codesandbox.io/s/antd-create-react-app-forked-0vs14?file=/index.js:315-811

【问题讨论】：

你想在哪里覆盖样式？在 CSS 中，您可以通过使选择器（说明受影响的元素）更加具体来覆盖样式。 css-tricks.com/specifics-on-css-specificity
@evolutionxbox，在styless.css中我添加了上面应该删除所有边距的代码，但是antd样式覆盖了我的？如何解决？
你的应该在 antd.css 文件之后加载
如果 antd 将样式放在 p-tag 上，你必须更加具体，正如 Evolutionxbox 所说的
p { box-sizing: border-box; margin: 0; padding: 0; }

【解决方案1】：

试试这个：

html * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

这就是 CSS 的工作原理，因为 antd 样式直接针对 p 标签，所以您通过 * 选择它的重要性不会更高，除非您在其后面添加 html * 或 body * 或标记样式如!important

Working CodeSandbox 是我从你那里分出来的。

【讨论】：

【解决方案2】：

只需要在数值中加上px

基于antd github问题You need to improve your CSS selector's specificity. And it's not a bug..Github Discussion

p {
  box-sizing: border-box;
  margin: 0px;
  padding: 30px;
}

【讨论】：