css - 从选择更改选项标签的高度

Question

我有下一个组件：

 <Select
        mode="multiple"
        placeholder="Inserted are removed"
        value={selectedItems}
        onChange={this.handleChange}
        style={{ width: "100%" }}
      >
        {filteredOptions.map(item => (
          <Select.Option key={item} value={item}>
            {item}
          </Select.Option>
        ))}
 </Select>

在我的演示中：https ://codesandbox.io/s/hide-already-selected-ant-design-demo-39xfe?file=/index.js:542-889 ，我添加了一些样式：

.ant-select-item-option-content {
  background-color: red;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  height: 10px;
  background-color: blue;
  height: auto;
}

为什么 height:10px;不工作？以及如何为该选择器应用 10px 的高度？

Answer 1

您应该删除 height:auto:

.ant-select-item-option-content {
  background-color: red;
  height: 5px;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  height: 10px;
  background-color: blue;
}

或者你可能需要这样的东西：

.ant-select-item-option-content {
  background-color: red;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  height: 10px;
  background-color: blue;
  height: auto;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) .ant-select-item-option-content {
  background-color: blue;
}

Answer 2

我检查了你的链接。似乎还有另一个样式规则将 amin-height:32px;应用于活动元素。
删除它或包含min-height在您的 CSS 中，如下所示：

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  min-height: 10px;
  height: 10px;
  background-color: blue;
}