After react introduces antd on demand, the CSS priority of antd is higher than that of custom common.css, which leads to style conflicts.

for example, according to the documentation, after the introduction of antd on demand, it is no longer necessary to manually import the antd.css file, and the css, of antd will only be loaded when referencing to the antd component

then I define a common.css file myself for style initialization. And introduce

into the top-level App.js

at this point, I found that the styles in my common.css are overwritten by antd, such as some initialization of the h tag

css of antd comes after common.css

how to deal with this situation

Css antdesign antd create-react-app react.js

Mar.19,2022

antd styles will be loaded into the style tag of the page. Even if demand loading is configured, it only means that unreferenced styles will not be loaded, but what you use will still be loaded into the style tag, which will lead to conflicts.
the solution is to keep your styles from using global styles.
this kind of technology has

Native inline style
css-modules
CSS in JS
- styled-components
- radium
. Wait

antd has its own set of design principles. If you use their components, they usually use a full set of components, and a small number of modified ones can be solved by the above techniques. If you want most of the changes, it may not be suitable to use antd .
or you can try custom theme , but there are not many customizable ones.
if you want to completely solve the problem from antd , you can take a detailed look at the second link in the reference. There is a lot of discussion in it. There are some solutions, but I haven't tried them, so you need to try them yourself.

< H2 > reference < / H2 >

Previous: Has any boss ever used this js-yaml npm bag with a blind look on his face?

Next: Whether xss sensitive characters are escaped before they are inserted into the database or when they are read from the database.