Material UI：如何更改禁用的选择字段的光标答案

【问题标题】：Material UI: How to change the cursor of a disabled Select fieldMaterial UI：如何更改禁用的选择字段的光标
【发布时间】：2020-02-11 21:11:49
【问题描述】：

当Select 组件标记为disabled 时，我想将光标样式从default 更改为not-allowed。另一种简单的样式，需要在 Material UI 中进行过度设计，我不知道该怎么做。

检查Select API 的CSS 部分我已尝试实现以下目标：

import React from 'react';
import FormControl from '@material-ui/core/FormControl'
import Select from '@material-ui/core/Select'
import InputLabel from '@material-ui/core/InputLabel'
import { withStyles } from '@material-ui/core/styles'

const styles = () => ({
    formControl: {
        minWidth: 256,
        maxWidth: 256,
    },
    disabled: {
        cursor: 'not-allowed'
    },
    root: {
        cursor: 'not-allowed',
        '&:disabled': {
            cursor: 'not-allowed'
        }
    },
    select: {
        cursor: 'not-allowed',
        '&:disabled': {
            cursor: 'not-allowed'
        }
    }
});

const renderSelectField = ({
  input,
  label,
  meta: { touched, error },
  children,
  classes,
  ...custom
}) => (
    <FormControl className={classes.formControl} error={error && touched}>
        { label && <InputLabel>{label}</InputLabel> }
        <Select
            children={children}
            {...input}
            {...custom}
            classes={{
                root: classes.root,
                disabled: classes.disabled,
                select: classes.select
            }}/> 
        }
    </FormControl>
)

export default withStyles(styles)(renderSelectField);

似乎应用所需样式的唯一方法是将!important 添加到禁用的样式中，这不是一个很好的做法。

【问题讨论】：

使用ant design select组件，或许能解决你的问题。 ant.design/components/select
您始终可以检查使用开发人员工具禁用的元素以检查类名。并覆盖/修改 .css 中该元素的样式
@Drusto 我必须更改的类具有唯一标识符 .MuiSelect-select-527
@Valip 你可以使用这个 css3 选择器 w3schools.com/cssref/sel_attr_begin.asp div[class^="MuiSelect"] 但是残疾人的类名是什么？我的意思是，你如何区分一个被禁用的和另一个没有被禁用的。也许在包装器div中？你能举个例子吗？ Js fiddle 或类似的
@Drusto 这是完整的选择器 .MuiSelect-select-145.MuiSelect-disabled-149

标签： reactjs material-ui

【解决方案1】：

你可以使用这个css3选择器https://www.w3schools.com/cssref/sel_attr_begin.asp

div[class*="MuiSelect-disabled]

【讨论】：

【解决方案2】：

您可以添加属性pointerEvents: 'all !important'

select: {
    '&:disabled': {
      cursor: 'not-allowed',
      pointerEvents: 'all !important'
    }
  }

【讨论】：