How to modify react's antd default style

coldplay.xixi
Release: 2020-12-22 16:09:21
Original
4527 people have browsed it

How to modify the antd default style in react: first add a div parent element to the table and set a className; then set the table header style within this style.

How to modify react's antd default style

The operating environment of this tutorial: windows7 system, React17 version. This method is suitable for all brands of computers.

How to modify the default style of antd in react:

I am currently working on the react antd project. Inevitably, we encountered the problem of modifying the default style of antd.

For example, if the header background color setting of the table component is used directly, the table of the entire project will be modified. The method I use here is to add a div parent element to the table, set a className for it, and then set the table header style within this style.

I use.lessprecompiled.

Copy after login
.boxW,.normalB { :global { .ant-table-thead > tr > th, .ant-table-tbody > tr > td { padding: 8px 8px !important; } .ant-table-thead > tr > th { background-color: rgb(192, 244, 248); } .ant-table-thead > tr > th:hover { background-color: rgb(192, 244, 248); } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover { background: rgb(192, 244, 248); } } }
Copy after login

In this way, you can only modify the style of the table in the current file.

By the way, here is the style inheritance of.less, through (&:extend (inherited class name)).

.boxW { min-width: 1150px; } .normalB { &:extend(.boxW); &:extend(.boxBorder); }
Copy after login

Related free learning recommendations:javascript(video)

The above is the detailed content of How to modify react's antd default style. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!