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モジュールによって提供されます。CSSモジュールは、グローバルスコープで使用されるクラス名をプロモートできます。
.test {
:global {
// 需要改变的节点名
.list-view-section-body {
background-color: #f5f5f9;
}
}
}
4.それも使用している場合はUmi.js的话
、global.less
ファイルのすぐ下でグローバルスタイルを変更できます。