Question

当将default组件标记为not-allowed时，我想将光标样式从Select更改为disabled。另一个简单的样式需要在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，这并不是一个好习惯。

Answer 1

您可以使用此css3选择器https://www.w3schools.com/cssref/sel_attr_begin.asp

div[class*="MuiSelect-disabled]

Answer 2

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

示例：

选择：{ '&：禁用'：{ 光标：'不允许'，指针事件：'所有！重要' } }

材质用户界面：如何更改禁用的“选择”字段的光标

2 个答案: