Question

我想将选择框设置为灰色条，或者使其不可见。我的CSS代码适用于我的元素，但是我无法对我的react-select元素做同样的事情。我尝试复制粘贴用于标签的CSS，用“选择”替换标签，但是什么也没发生

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为true时才会应用。

Answer 2

创建一个getter函数，如果给定条件为true，则该函数将返回样式对象。

myVisibility() {
  let style = {
    hide: {
      background: 'transparent',
      border: 'none !important',
      font-size: '0px',
      background-color: '#D8D8D8 !important'
    },
  };

  if (this.state.disabled_hopper) {
    return style.hide
  }
}


<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}
   style={this.myVisibility()}
   disabled={this.state.disabled_hopper}
   onCreateOption={this.handleCreateHopper}
/>

禁用时如何设置我的反应选择的样式（在CSS中）？

2 个答案: