如何修改antd里Select的样式？？？？？

最新推荐文章于 2024-11-18 16:29:11 发布

原创

最新推荐文章于 2024-11-18 16:29:11 发布 · 2.3w 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了如何修改Ant Design中的Select组件样式，包括Select选择器、下拉菜单、选项及焦点状态的样式调整方法，提供了具体CSS代码示例。

antd的Select

附一个官网链接 antd Select
在这里插入图片描述

官方给出的框架用起来是很方便，但是美观程度差强人意，给出的API里虽有className属性，但是这是进行修改Option的样式
在这里插入图片描述

那如何修改Select的样式呢？

废话不多说，直接上代码

 :global{
   
   
	.ant-select-selection{
   
       // antd 版本3.*
		// 你想要的样式
	}
	.ant-select-selector{
   
      // antd 版本 4.*
		// 你想要的样式
	}
}

【修改样式 antd】
方法很简单，有两点需要注意：

下拉框的样式也并不好看，改如何进行修改呢？

效果图：
在这里插入图片描述

css代码：

:globa