How to modify react's antd default style

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.

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 .less precompiled.

              <div className={styles.boxW} >
                    <Table 
                      columns={colType}
                      rowKey=&#39;fxwd&#39;
                      pagination={false}
                      bordered
                      dataSource={dataType}
                    />
              </div>

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

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

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!