博客

antd dropdown样式调整问题

• 最近刚开始学前端，遇到了一个样式问题调试了很久，记录一下。客户给的设计图中有针对select dropdown的样式要求，包括背景色、字体颜色、选中时颜色等等等。。
• 虽然通过F12中元素选择器确定了dropdown的css，直接在Chrome的DevTools中进行设置也可以产生效果，但是呢，在代码中进行设置后却不生效。。。那我这个前端新手小白就懵逼了呀。。
• 最后！！！请教小姐姐后，发现是项目最外层的总体样式中有针对此进行样式设置，因此覆盖了我新写的css样式。为了不改变总体样式，可在Select选择框中加一个dropdownClassName属性，针对此下拉框定义它自己的样式即可。

• <Select mode="multiple" placeholder="请选择调度间隔" dropdownClassName="dropdown-style">
             <Option value="0">周一</Option>
             <Option value="1">周二</Option>
   		  .........
  </Select>
  

• .dropdown-style {
  
  
  .ant-select-dropdown-menu {
  
  
  background: #1F1F26;
  
  border: solid 1px #32323a;
  
  }
  
  .ant-select-dropdown-menu-item {
  
  
  color: #fff !important;
  
  }
  
  .ant-select-dropdown-menu-item:hover {
  
  
  background: #32323a;
  
  }
  
  .ant-select-dropdown-menu-item-selected {
  
  
  background: #32323a;
  
  }
  
  .ant-select-dropdown-menu-item-active {
  
  
  background: #32323a;
  
  }
  
  }

PS：

.ant-select-dropdown-menu-item {


color: #fff !important;

}

此处如果不加！important 字体颜色仍然会被外层样式覆盖！！虽然本菜鸟还不知道为啥。。。。