ant-design自定義元件的樣式

1、使用

ant-design

元件的時候，我們有時候需要自定義去改變元件的一些樣式。

2、這裡我們可以隻用全局樣式定義去改變對應類的樣式

3、舉例

• 我要去改變

  ListView

  元件的背景樣式

<ListView
            style={{
              overflow: 'auto',
              height: `${height}px`,
            }}
            renderHeader={this.renderHeader}
            dataSource={dataSource}
            renderFooter={this.renderFooter}
            Size={20}
            initialListSize={20}
            renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, rowID)}
            onEndReached={this.onEndReached}
            onEndReachedThreshold={60}
            pullToRefresh={
              <PullToRefresh
                refreshing={refreshing}
                damping={50}
                onRefresh={() =>
                  this.getDynamicsList()
                }
              />
            }
          />
           

• 将

  ListView

  使用

  div

  包裹起來

<div className={styles.test}>
         <ListView
            style={{
              overflow: 'auto',
              height: `${height}px`,
            }}
            renderHeader={this.renderHeader}
            dataSource={dataSource}
            renderFooter={this.renderFooter}
            Size={20}
            initialListSize={20}
            renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, rowID)}
            onEndReached={this.onEndReached}
            onEndReachedThreshold={60}
            pullToRefresh={
              <PullToRefresh
                refreshing={refreshing}
                damping={50}
                onRefresh={() =>
                  this.getDynamicsList()
                }
              />
            }
          />
</div>
           

• CSS

  :global

  是 CSS Modules 提供的可以将類名提升為全局作用域下進行使用

.test {
  :global {
  // 需要改變的節點名
    .list-view-section-body {
      background-color: #f5f5f9;
    }
  }
}
           

4、如果你也用的是

Umi.js的話

，可以直接在

global.less

檔案下修改全局樣式。