React 16非hooks版本下Material UI DatePicker基于prop实现条件样式

问题原因 #

你当前报错是因为顶层定义的styles函数作用域无法访问组件实例内部的disabled prop，直接在样式定义中引用这个不存在的变量自然会抛出未定义错误。

解决方案 #

方案1（优先推荐，无需修改组件逻辑）

你给TextField传入disabled属性后，旧版Material UI会自动给内部输入框添加Mui-disabled类名，直接通过CSS选择器做条件判断即可：

const styles = (theme) => ({
  textField: {
    color: COLORS.text,
    backgroundColor: COLORS.backgroundColor,
    '&:focus': {
      color: COLORS.text,
      backgroundColor: COLORS.backgroundColor,
    },
    // 非禁用状态hover显示指针
    '&:hover:not(.Mui-disabled)': {
      cursor: 'pointer',
    },
    // 禁用状态hover显示禁止光标（注：你之前写的'disabled'不是合法cursor值，修正为标准的'not-allowed'）
    '&.Mui-disabled:hover': {
      cursor: 'not-allowed',
    },
  },
});

组件代码不需要做任何修改即可生效。

方案2（兼容无内置禁用类的极旧MUI版本）

如果你的Material UI版本过旧不会自动添加Mui-disabled类，可以自己动态拼接类名实现：

1. 先在样式定义中新增禁用状态的样式规则：

const styles = (theme) => ({
  textField: {
    color: COLORS.text,
    backgroundColor: COLORS.backgroundColor,
    '&:focus': {
      color: COLORS.text,
      backgroundColor: COLORS.backgroundColor,
    },
    '&:hover': {
      cursor: 'pointer',
    },
  },
  // 新增禁用状态的hover样式
  textFieldDisabled: {
    '&:hover': {
      cursor: 'not-allowed',
    },
  }
});

2. 修改组件的InputProps配置，根据disabled prop动态拼接类名：

InputProps={{
  classes: {
    input: `${classes.textField} ${disabled ? classes.textFieldDisabled : ''}`,
  },
}}

两种方案都完全兼容你当前使用的无hooks的React 16版本，不需要调整现有代码的整体结构。

内容的提问来源于stack exchange，提问作者AnaCS