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

效果

 官网传送门

选择器 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;
  }
}