antd(React) 关于自定义Select选择框的样式

KyleZhou_

已于 2022-08-16 11:17:46 修改

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： antd 文章标签： react.js javascript ecmascript

于 2022-08-15 16:30:31 首次发布

本文链接：https://blog.csdn.net/weixin_38949279/article/details/126349454

antd 专栏收录该内容

2 篇文章

订阅专栏

这篇博客记录了在React项目中使用antd库时，如何对Select组件进行自定义样式的操作。通过全局样式穿透避免样式冲突，需在antd Select组件外层添加<div>标签。

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

1.做个记录，有时候需要一些自定义样式的时候可以快速更改

【注意】：因为使用的是global样式穿透，为了防止污染其他组件，需要在引用antd组件时再包裹一层<div></div>

.curstom {
  :global {
    //设置未展开时的样式
    .ant-select {
      height: 3.5vh;
      width: 250px;
      border: 2px solid #064c70;
    }

    //设置背景色和居中对齐
    .ant-select-selector {
      height: 3.5vh !important;
      background-color: #013269 !important;
      align-items: center;
    }

    //设置option的样式 文字
    .ant-select-selection-item {
      padding-right: 0;
      text-align: center;
      @include fontSize($select);
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #16d0ff;
    }
  }
}

//下拉框的样式
.optionCustom {
  width: 200px;
  //background: rgba(22, 208, 255, 0.1) !important;
}

//单个option的样式
.dropdown {
  min-height: 3vh !important;
  line-height: 3vh !important;
  text-align: center;
  @include fontSize($tiptitle);
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #16ce !important;
}


//改option选中的样式(在chrome中调试时对着NODE点击递归展开即可快速看到变化的class名字)
:global {
  .ant-select-dropdown {
    //设置被选中项目状态
    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
      color: rgba(255, 255, 255, 0.85);
      font-weight: 600;
      background-color: #388ed357;
    }
  }
}