ant-design自定义组件的样式
发布日期:2021-05-20 10:06:50 浏览次数:8 分类:技术文章

本文共 1524 字,大约阅读时间需要 5 分钟。

1、使用ant-design组件的时候,我们有时候需要自定义去改变组件的一些样式。
2、这里我们可以只用全局样式定义去改变对应类的样式
3、举例

  • 我要去改变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={
 
refreshing={    refreshing}
damping={    50}
onRefresh={    () =>
  this.getDynamicsList()
}
  />
}
  />
  • ListView使用div包裹起来
   
    
 
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={
 
refreshing={    refreshing}
damping={    50}
onRefresh={    () =>
  this.getDynamicsList()
}
  />
}
  />
  • CSS
    :global是 CSS Modules 提供的可以将类名提升为全局作用域下进行使用
.test {

 :global {
 // 需要改变的节点名
.list-view-section-body {
 background-color: #f5f5f9;
}  }}

4、如果你也用的是Umi.js的话,可以直接在global.less文件下修改全局样式。

转载地址:https://blog.csdn.net/weixin_45416217/article/details/108874970 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:解决ant-design刷新存在缓存问题
下一篇:使用chromeinspect#devices调试WebView_APP页面

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.191.171.40]2022年08月09日 08时11分29秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章