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

最新推荐文章于 2025-02-17 13:10:56 发布

Dark_programmer

最新推荐文章于 2025-02-17 13:10:56 发布

阅读量2.2w

点赞数 19

CC 4.0 BY-SA版权

分类专栏： antd 文章标签： react antd

本文链接：https://blog.csdn.net/Dark_programmer/article/details/108084032

antd 专栏收录该内容

6 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

antd的Select

antd的Select

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

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

那如何修改Select的样式呢？

废话不多说，直接上代码

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

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

引入的 antd 组件类名没有被 CSS Modules 转化，所以被覆盖的类名 .ant-select-selection 必须放到 :global 中。
因为上一条的关系，覆盖是全局性的。为了防止对其他 Select 组件造成影响，所以需要包裹额外的 className 限制样式的生效范围。

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

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

css代码：

:global{
  .ant-select-dropdown{
    border-radius: 0 0 10px 10px;   // 圆角
    overflow: hidden; 
      .ant-select-dropdown-menu,.ant-select-dropdown-menu-root,.ant-select-dropdown-menu-vertical{
        li:hover{// 鼠标 hover 效果
          background-color: rgba(132, 63, 255,0.4);
        }
        background-color: #fff; // 背景色
      }
      .ant-select-dropdown-menu-item-active{ 
        background-color: rgba(132, 63, 255,0.4);  // 展开时。默认选中option的背景色
      }
  }
  // 聚焦时 边线颜色为背景色   失焦时蓝色高亮颜色替换成紫色
 .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
    border-color: transparent; 
    box-shadow: 0 0 2px rgba(132,63,255,1);
  } 
}

加更没有废话，直接上图+代码

在这里插入图片描述
这种样式的select组件，该如何修改成自己显示想要的样式呢，如下图：

在这里插入图片描述

:global{
	.ant-radio-group{ // 日、周、月模式切换 
	    .ant-radio-button-wrapper{ // 每一项的宽、高、文字居中方式
	      width: 75px;
	      height: 42px;
	      line-height: 42px;
	      text-align: center;
	    }
	    .ant-radio-button-wrapper-checked{  // 选中项的 文字颜色、边线颜色
	      color: #843FFF;
	      border-color: #843FFF !important;
	    }
	    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){  
	    // 第二项以及第三项的左侧线条的颜色  如不明白，看下 图一
	      box-shadow:-1px 0 0 0 #843FFF
	    }
	    .ant-radio-button-wrapper:hover{ // 鼠标经过每一项的 字体的颜色设置
	      color: #3B4042!important;
	    }  
	    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within{
	     // 鼠标选中某项时，去掉默认的外发光
	      outline: none;
	    }
	    label:first-child{ // 单独设置第一项的圆角效果
	      border-radius:9px 0px 0px 9px;
	    }
	    label:last-child { // 单独设置最后一项的圆角效果
	      border-radius:0px 9px 9px 0px;
	    }
  }
}