css - 禁用时更改文本文件的颜色

Question

我想在禁用时更改文本文件的颜色。我为启用和禁用编写此代码。启用效果很好。

  const StyledTextField = styled(({ dir, ...other }) => <TextField {...other} />)`
  label.focused {
  color: green;
 }


.MuiOutlinedInput-root {

direction: ${props => (props.dir ? props.dir : "rtl")};
fieldset {
  border-color: white;
  background-color: rgba(2, 37, 67, 0.5);
}


&:hover fieldset {
  border-color: #87ceeb;
}
&.Mui-focused fieldset {
  border-color: rgba(0, 51, 96, 1);
}

  

fieldset  {
  border-color: white;
  background-color: rgba(2, 37, 67, 0.5);
  
  }
  }

 
}

.MuiOutlinedInput-root.Mui-disabled {
 
direction: ${props => (props.dir ? props.dir : "rtl")};
fieldset {
  border-color: black;
  background-color:black;
}


&:hover fieldset {
  border-color: black;
}
&.Mui-focused fieldset {
  border-color: black;
 }

  

fieldset  {
  border-color: black;
  background-color:black;
  
}

 
  }
    ${props =>
    props.center &&
   `.MuiOutlinedInput-input {
    text-align: center;
    }`}
   `;

  export default StyledTextField;

这是我的文本文件：

  <MyTextField
      id={props.id}
      name={props.id}
      className={props.classes.textField}
      value={props.value}
      onChange={props.onChange}
      margin="dense"
      variant="outlined"
      type={props.type ? props.type : "text"}
      error={props.error}
      fullWidth={props.width ? false : true}
      style={props.width ? { width: props.width } : {}}
      dir={props.dir}        
      inputProps={{ readOnly: props.disable }}
      label={props.message}
      disable={props.disable}
      
      
    />

我像这样使用它：

    <InputRow
                                id="qwe"
                                value={min_quality_threshold}
                                onChange={this.handleChange}
                                classes={classes}
                                disable={true }
                                
                            />

在 inputRow 中，我将 disable 设置为 true。这样我就被禁用了，然后它应该具有禁用根的样式。但它没有改变。

标签： cssreactjsmaterial-ui

Answer 1

如果您在 Input 上设置 disabled 属性，一些 CSS 应该这样做

fieldset:disabled  {
  border-color: darkgrey;
  background-color: grey;
}