怎麼修改react的antd預設樣式

react中修改antd預設樣式的方法：先為table新增一個div父元素，並設定個className；然後設定這個樣式內的table表頭樣式。

本教學操作環境：windows7系統、React17版，此方法適用於所有品牌電腦。

react中修改antd預設樣式的方法：

最近在做react antd專案。不可避免的遇到了修改antd預設樣式的問題。

例如，table組件的表頭背景色設置，如果直接使用元素樣式，會修改整個專案的table。這裡我用的方法是，為table新增一個div父元素，為他設定個className，然後設定這個樣式內的table表頭樣式。

我使用的.less#預編譯。

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

這樣就可以只修改到目前檔案裡table的樣式了。

這裡順便記錄一下.less的樣式繼承，透過（&:extend(被繼承class名稱)）。

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

相關免費學習推薦：javascript（影片）

以上是怎麼修改react的antd預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！