ant-design自定义组件的样式

长孙章横
2023-12-01

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文件下修改全局样式。

 类似资料: