嗯會(huì)修改react的antd默認(rèn)樣式

小編給大家分享一下嗯會(huì)修改react的antd默認(rèn)樣式，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

react中修改antd默認(rèn)樣式的方法：首先給table添加一個(gè)div父元素，并設(shè)置個(gè)className；然后設(shè)置這個(gè)樣式內(nèi)的table表頭樣式。

react中修改antd默認(rèn)樣式的方法：

最近在做react+antd項(xiàng)目。不可避免的遇到了修改antd默認(rèn)樣式的問(wèn)題。

比如，table組件的表頭背景色設(shè)置，如果直接使用元素樣式，會(huì)修改整個(gè)項(xiàng)目的table。這里我用的方法是，給table添加一個(gè)div父元素，給他設(shè)置個(gè)className，然后設(shè)置這個(gè)樣式內(nèi)的table表頭樣式。

我使用的.less預(yù)編譯。

              <div className={styles.boxW} >
                    <Table 
                      columns={colType}
                      rowKey='fxwd'
                      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);
        }
    }
}

這樣就可以只修改到當(dāng)前文件里table的樣式了。

這里順便記錄一下.less的樣式繼承，通過(guò)（&:extend(被繼承class名)）。

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

看完了這篇文章，相信你對(duì)嗯會(huì)修改react的antd默認(rèn)樣式有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！