[英]Override css styles in react js
I created an application in React using ant design library.我使用 ant 设计库在 React 中创建了一个应用程序。 In my CSS file, I added some base styles:
在我的 CSS 文件中,我添加了一些基础 styles:
* { box-sizing: border-box; margin: 0; padding: 0; }
I expect that these styles should override all styles, but they don't override antd styles.我希望这些 styles 应该覆盖所有 styles,但它们不会覆盖 antd styles。 Inspecting the
p
tag in the console I noticed that these styles:检查控制台中的
p
标签,我注意到这些 styles:
{ margin-top: 0; margin-bottom: 1em; } /// comes from antd.css
overide my previous styles.覆盖我之前的 styles。 How to fix this (to make my styles to override all styles) without using
!important
?如何在不使用
!important
的情况下解决此问题(使我的 styles 覆盖所有样式)?
demo: https://codesandbox.io/s/antd-create-react-app-forked-0vs14?file=/index.js:315-811演示: https://codesandbox.io/s/antd-create-react-app-forked-0vs14?file=/index.js:315-811
You only need to add px
in number value您只需要在数值中添加
px
Based on antd github issue You need to improve your CSS selector's specificity. And it's not a bug..
基于 antd github issue
You need to improve your CSS selector's specificity. And it's not a bug..
You need to improve your CSS selector's specificity. And it's not a bug..
Github Discussion You need to improve your CSS selector's specificity. And it's not a bug..
Github 讨论
p {
box-sizing: border-box;
margin: 0px;
padding: 30px;
}
Try this:尝试这个:
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
This is how CSS works, since antd styles target directly the p
tag, you selecting it via *
won't have a higher importance unless you add behind it html *
or body *
or mark the styles as !important
This is how CSS works, since antd styles target directly the
p
tag, you selecting it via *
won't have a higher importance unless you add behind it html *
or body *
or mark the styles as !important
Working CodeSandbox that I forked from yours.我从你那里分叉出来的工作 CodeSandbox 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.