如何修改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;
}
}
}
图一 如下所示 红色线条即为所描述线