Override css styles in react js

Question

I created an application in React using ant design library. In my CSS file, I added some base 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. Inspecting the p tag in the console I noticed that these styles:

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

overide my previous styles. How to fix this (to make my styles to override all styles) without using !important?
demo: https://codesandbox.io/s/antd-create-react-app-forked-0vs14?file=/index.js:315-811

Where are you trying to override the styles? In CSS you can override styles by making the selector (the thing that says what element is affected) more specific. css-tricks.com/specifics-on-css-specificity — evolutionxbox
– evolutionxbox, Commented Dec 4, 2021 at 13:05
@evolutionxbox, in styless.css i added the above code that should remove all margins, but antd styles override mine? how to fix? — Asking
– Asking, Commented Dec 4, 2021 at 13:09
and if antd puts the styles on the p-tag you have to be more spcific, as evolutionxbox said — TheWuif
– TheWuif, Commented Dec 4, 2021 at 13:12

whygee · Accepted Answer · 2021-12-04 15:41:23Z

1

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

Working CodeSandbox that I forked from yours.

answered Dec 4, 2021 at 15:41

whygee

1,98410 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wisnuaryadipa · Accepted Answer · 2021-12-04 13:47:17Z

0

You only need to add px in number value

Based on antd github issue 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;
}

edited Dec 4, 2021 at 13:47

answered Dec 4, 2021 at 13:22

wisnuaryadipa

7601 gold badge10 silver badges18 bronze badges

10 Comments

Asking Over a year ago

your answer does not work

wisnuaryadipa Over a year ago

It's work codesandbox.io/s/antd-create-react-app-forked-134qr?file=/…

TheWuif Over a year ago

it will not work, as style is not specific. this way you can only stet styles that are not set more specific

wisnuaryadipa Over a year ago

You watch codesandbox that i send ?

TheWuif Over a year ago

you can set the padding, as it is not send via a p style, but you cant set the margin this way.

|

Collectives™ on Stack Overflow

Override css styles in react js

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related