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

KyleZhou_

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

阅读量5.4k

点赞数

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

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

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

版权

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

摘要由CSDN通过智能技术生成

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-weig