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='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);
}
}
}這樣就可以只修改到目前檔案裡table的樣式了。
這裡順便記錄一下.less的樣式繼承，透過（&:extend(被繼承class名稱)）。
.boxW {
min-width: 1150px;
}
.normalB {
&:extend(.boxW);
&:extend(.boxBorder);
}相關免費學習推薦：javascript（影片）
以上是怎麼修改react的antd預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
