1. When using ant-design
components, we sometimes need to customize to change some styles of the components.
2. Here we can only use the global style definition to change the style of the corresponding class.
3. Examples
- I am going to change
ListView
the background style of the component
<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()
}
/>
}
/>
- Wrap the
ListView
usediv
<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
is provided by CSS Modules, which can promote the class name to be used in the global scope
.test {
:global {
// 需要改变的节点名
.list-view-section-body {
background-color: #f5f5f9;
}
}
}
4. If you are also using it Umi.js的话
, you can global.less
modify the global style directly under the file.