When the text field is disabled, I want to change its color. Below is the code I have written for enabled and disabled states. The style works correctly when the text field is enabled.
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;
This is how my text field looks:
<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}
/>
And here's how I use it:
<InputRow
id="qwe"
value={min_quality_threshold}
onChange={this.handleChange}
classes={classes}
disable={true }
/>
In the InputRow component, I set the disable prop to true to make it disabled, but the style of the disabled root does not change as expected.