React中Antd的Select组件下拉样式如何修改

下面这种效果会覆盖全局的css,最终解决看结尾(11.22更新)

效果

 官网传送门

选择器 Select - Ant Design (antgroup.com)

自定义样式

.ant-select-dropdown {
  box-sizing: border-box;
  color: #ffffff; /* 下拉菜单字体颜色 */
  background-color: #07233a !important; /* 下拉菜单背景色 */
  border: 1px solid #379be8;
  border-radius: 0 !important ;
  border-radius: 0px 0px 0px 0px;
  box-shadow: inset 0px 0px 8px 2px rgba(12, 123, 164, 0.3);
  .ant-select-item-option {
    width: 100%;
    margin-left: 10%;
    color: #ffffff; /* 下拉项字体颜色 */
    border-bottom: 1px solid #379be8;
    border-radius: 0px 0px 0px 0px;
    box-shadow: inset 0px 0px 8px 2px rgba(12, 123, 164, 0.3);
    &:hover {
      background-color: rgba(255, 255, 255, 0.2); /* 鼠标悬停时的背景色 */
    }
    &.ant-select-item-option-selected {
      background-color: rgba(255, 255, 255, 0.3); /* 选中项的背景色 */
    }
  }
  .ant-select-item-option:nth-last-child(1) {
    border: none !important;
  }
}

2024.11.22更新,只影响单个,不影响其他页面Select样式

产生原因: 通过检查元素发现该Option下拉框是和root同级的,此刻定义Css是没有用的,官网给出了解决方法

解决方法

加上popupClassName,后面的为自己定义的css名字,后续的代码正常书写,检查元素,你会发现和body同级的css,居然有你设置的这个属性,这样就可以做到单个修改

  .popupClassName_select {
    box-sizing: border-box;
    color: #ffffff; /* 下拉菜单字体颜色 */
    background-color: #07233a !important; /* 下拉菜单背景色 */
    border: 1px solid #379be8;
    border-radius: 0 !important ;
    border-radius: 0px 0px 0px 0px;
    box-shadow: inset 0px 0px 8px 2px rgba(12, 123, 164, 0.3);
    .ant-select-item-option {
      width: 100%;
      margin-left: 10%;
      color: #ffffff; /* 下拉项字体颜色 */
      border-bottom: 1px solid #379be8;
      border-radius: 0px 0px 0px 0px;
      box-shadow: inset 0px 0px 8px 2px rgba(12, 123, 164, 0.3);
      &:hover {
        background-color: rgba(255, 255, 255, 0.2); /* 鼠标悬停时的背景色 */
      }
      &.ant-select-item-option-selected {
        background-color: rgba(255, 255, 255, 0.3); /* 选中项的背景色 */
      }
    }
    .ant-select-item-option:nth-last-child(1) {
      border: none !important;
    }
  }

官网说法