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


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

.

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 >
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be6473-317dc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be6473-317dc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?