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

}