CODEWITHSUNDEEP
javascripthtmlcssreactjs
Asking
Asking

Reputation: 4192

Override css styles in react js

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

Upvotes: 0

Views: 1917

Answers (2)

whygee
whygee

Reputation: 1984

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.

Upvotes: 1

wisnuaryadipa
wisnuaryadipa

Reputation: 760

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;
}

Upvotes: 0

Related Questions