Пользовательский интерфейс материала: Как изменить курсор отключенного поля выбора

Question

Я хочу изменить стиль курсора с default на not-allowed, когда компонент Select помечен как disabled. Еще один простой стиль, требующий чрезмерной подготовки в пользовательском интерфейсе материалов, и я не могу понять, как это сделать.

Проверка раздела CSS API Select Я пытался добиться своегоцель следующая:

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 к отключенному стилю, что не очень хорошая практика.

Answer 1

Вы можете использовать этот селектор css3 https://www.w3schools.com/cssref/sel_attr_begin.asp

div[class*="MuiSelect-disabled]