Ad

Material UI: How To Change The Cursor Of A Disabled Select Field

- 1 answer

I want to change a cursor style from default to not-allowed when a Select component is marked as disabled. Another easy styling that require overengineering in Material UI and I can't figure out how to do it.

Checking the CSS section of the Select API I've tried to achieve my goal as follows:

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

It seems that the only way to apply the desired style is by adding !important to the disabled style, which is not a really good practice.

Ad

Answer

You can use this css3 selector https://www.w3schools.com/cssref/sel_attr_begin.asp

div[class*="MuiSelect-disabled]

Ad
source: stackoverflow.com
Ad