I'm practicing react and I put <link rel="stylesheet" href="%PUBLIC_URL%/css/reset.css" /> in the head of index.html to reset the styles. However, <h1> has a margin-bottom:0.5em which cannot be reset. In Chrome debugger, I find these styles as below, but I never wrote styles in the upper part. I'm wondering where it is from and how can I reset margin-bottom to 0.(I'm using create-react-app and antd components in my exercise project.)
Why can't I reset margin-bottom to 0 when using react and antd?
Viewed 529
2 Answers
Have you tried adding * { margin: 0; } to your CSS?
The * will target all of the elements.
You're using react, so make a component with the style you want. If it's an h1 with no margin on the bottom, just do,
// styledHeading.module.css
styledHeading {
margin-bottom: 0
}
// styledHeading.js
import styles from './styleHeading.module.css
// className for additional css classes
const StyledHeading = ({text, className}) =>
<h1 className={`${styles.styledHeading} ${className}`}>{text}</h1>
Related