javascript - 禁用时如何设置我的 react 选择样式(在 CSS 中)？

Question

我想让我的选择框要么只是一个灰色条，要么在它不可见时不可见。我的 CSS 代码适用于我的元素，但我不能为我的 react-select 元素做同样的事情。 我试过复制粘贴用于标签的 CSS，用“select”替换标签，但没有任何反应

CSS:

// This is the code that makes my label elements gray boxes when disabled

label:disabled,
label[disabled] {
    background: transparent;
    border: none !important;
    font-size: 0px;
    background-color: #D8D8D8 !important;
}

html/js:

<ControlLabel className="input-label">
    Hopper Angle 
    <WithTooltip 
        tooltip={ <span>Select Hopper Angle below, or type in a custom value then click “create”.</span> }>
        <span class="glyphicon glyphicon-question-sign"></span>
    </WithTooltip>
</ControlLabel>
<br />
<CreatableSelect 
  name="hopper_angle" 
  value={{value: "hopper_angle" + this.state.hopper_angle.toString(), label: this.state.hopper_angle.toString()}}
  className="react-select"
  components={{ IndicatorSeparator }}
  options={ data["hopper_angle"].map(d => ({label: d.toString(), value: "hopper_angle" + d.toString()})) }
  onChange={this.handleChange}
  disabled={this.state.disabled_hopper}
  onCreateOption={this.handleCreateHopper}
/>

Answer 1

className={`react-select${this.state.disabled_hopper ? ' disabled-class' : ''}`}

在您的 CSS 中，您可以将样式添加到 .disabled-class(或您选择的任何名称)，该样式仅在 this.state.disabled_hopper 时应用是真的。