根据道具值材料ui datepicker conditiona css更改样式答案

【问题标题】：change the styling depending on a prop value material ui datepicker conditiona css根据道具值材料ui datepicker conditiona css更改样式
【发布时间】：2021-08-30 07:33:37
【问题描述】：

我仍然是最近才做出反应的，我正面临一个我似乎无法解决的新问题。我正在使用 react 16，钩子之前的版本（我无法更改此版本，我使用的 react 应用程序在仅支持此版本之前的其他程序中工作），并且我正在使用材料 ui。

我正在使用这样的日期选择器：

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);

我想根据 disabled 的值是 true 还是 false 来更改悬停样式，但我无法在声明道具之前更改它，我也无法将样式移动到道具之后，因为那样我就可以了不要在文件的最后一行使用它。

不确定在这种情况下如何执行条件 css。我收到类似 ofc 的错误，因为 disabled 关键字无法被识别。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

访问道具的示例代码

const styles = (theme) => ({
  textField: {
    '&:hover': {
      cursor:(props)=> props.disabled ? 'disabled' : 'pointer',
    },
  },
});

【讨论】：