网络日志

修改Ant Design默认样式的方法及遇到的问题

一直想研究一下AntDesign组件库的组件样式,碰巧最近在一个Umi+Ant Design+dva.js的项目中,需要配置theme和对组件样式修改,因此直接仔细的研究,并记录为本文档。本想研究明白再发文章总结,但是碍于例子不太好复现,因此每遇到一个问题,就在此记录。


本篇文章,以<Select>组件为例进行演示和讲解。

1.修改样式的方法及需要注意的问题

  • 最简单的方法就是根据Ant Design Por官方文档API中提供的属性Style覆盖ClassNme等方法,对组件的样式进行修改,但是这并不能完全满足我们的需求。比如:

    <Select defaultValue="lucy" style={{width: 120, backgroundColor: 'red'}}></Select>

    在此处对select组件的backgroudColor进行修改,但是由于Antd组件本身就有了一个属性,因此呈现效果如下:这并不满足我们的需求,因此提供下文的一系列方法。

  • 全局修改某一种组件的样式(#root方法)

    src/global.less文件中添加如下代码:(此处,我尝试了放到其他.less文件中结果同样可以,但是为了管理方便,建议涉及到全局修改的样式,还是在global.less文件中)

    #root .ant-select-selection{//在src/global.less文件中添加
    background: red;
    }

    呈现效果如下:此时我们发现,两个Select选择器都变成了红色背景,可是如果我们只想改变某一个组件背景的话,我们该怎么办呢?

  • 全局修改某一种组件的样式(:global方法

    同样,在src/global.less文件中添加如下代码:

    :global  .ant-select-selection{
    background: blue;
    }

    呈现效果如下:样式没有改变的原因,见下图:因为原本的.ant-select-selection中已经存在background-color,同时:global的优先级又没有#root高,因此不会覆盖,解决这个问题的方法就是加上! important代码如下:

    :global  .ant-select-selection{
    background: blue !important;
    }

    呈现效果如下:但是这依然解决不了,我们只想改变某一个组件背景的问题,下面解决办法来了!

  • 修改某一个组件的样式(避免CSS被编译为哈希字符串

    实现代码如下:

    .selection{
     :global{
       .ant-select-selection{
         background-color: red !important; //设置颜色
       }
     }
    }
    import styles from '../../page.less'//.less文件为上文中定义.selection所在文件
    <Select defaultValue="lucy" style={{width: 120}} className={styles.selection}>

    实现效果如下:(因为此处我只给第一个<Select>加了className)

  • 修改某一个组件的样式(有坑!但解决了

    注意:这种方法会存在className被css loader编译成哈希字符串的情况,但提供了解决办法实现代码如下:

    :global{//写法一
    .select_test{  //给该select框加的className
      .ant-select-selection{
        background-color: red;
      }
    }
    }
    :global(.select_test .ant-select-selection){写法二
    background-color: yellow !important;
    }
    import styles from '../../page.less'//.less文件为上文中定义.select_test所在文件
    <Select defaultValue="lucy" style={{width: 120}} className={styles.select_test}></Select>

    此时我们会发现并不生效,(原因是:className被css loader编译成哈希字符串解决办法:(为了统一代码和浏览器class的一致,将select的className的添加方式换了一下

    <Select defaultValue="lucy" style={{width: 120}} className="select_test"></Select>

    问题解决,效果如下:

参考资料:怎么修改antd默认样式及遇到的问题修改ant design 默认css样式另:附上深入理解CSS选择器优先级应该会对各位所有帮助。

理解尚浅,望不吝赐教!