I recently started working with react and I've encountered a new challenge that has me a bit stumped. My project is using react version 16, which is the version before hooks (I'm unable to update this as it needs to work within another program that only supports up to this version), and I am incorporating material ui.
Specifically, I am utilizing a date picker in this manner:
const styles = (theme) => ({
textField: {
color: COLORS.text,
backgroundColor: COLORS.backgroundColor,
'&:focus': {
color: COLORS.text,
backgroundColor: COLORS.backgroundColor,
},
'&:hover': {
cursor: disabled ? 'disabled' : 'pointer',
},
},
});
class DatePickers extends Component {
handleChange = (e) => {
const { onChange } = this.props;
const isPicked = e.target.value;
onChange(this.props.value, isPicked);
};
render() {
const { classes, partialDayKey, value, disabled } = this.props;
return (
<TextField
id={`${partialDayKey}-datepicker`}
type="date"
disabled={disabled}
name={`${partialDayKey}-datepicker`}
value={value || '0000-00-00'}
InputProps={{
classes: {
input: classes.textField,
},
}}
onChange={this.handleChange}
/>
);
}
}
export default withStyles(styles)(DatePickers);
I am trying to alter the hover styling based on whether the disabled prop is true or false, but I can't modify it prior to declaring the props, nor can I relocate styles after the props due to its usage at the end of the file.
Not sure how to approach conditional CSS in this scenario. The error I encounter pertains to the unrecognized disabled keyword.