css – How to override the .MuiSelect-nativeInput in Material-UI


const styles = makeStyles((theme) => ({
    root: { margin: '0px 20px' },
    textStyle: {
        fontFamily: 'Comfortaa',
    },
    container: {},
    textField: {
        fontFamily: 'Comfortaa',
    },
    dropDownFormSize: {
        width: '100%',
        fontFamily: 'Comfortaa',
    },
    optionDropdown: {
        color: 'black',
    },
    dropDownSelector: {
        color: 'black',
        backgroundColor: 'tomato',
    },
    nativeInput: {
       
        opacity : '1',

}

}));


const MainTable: React.FC = () => {
    const classes = styles();
 <FormControl
                                       classes={{
                                                    root: classes.dropDownFormSize,
                                                }}
                                            >
                                                <Select
                                                    required
                                                    className={
                                                        classes.dropDownSelector
                                                    }
                                                    value={emotion[i]}
                                                    name="emotion"
                                                    onChange={handleChangeEmotion(
                                                        i
                                                    )}
                                                    classes={{
                                                        root: classes.optionDropdown,
                                                        select: classes.optionDropdown,
// using nativeInput here gives me error
                                                         nativeInput: classes.nativeInput

                                                    }}
                                                    MenuProps={{
                                                        anchorOrigin: {
                                                            vertical: 'bottom',
                                                            horizontal: 'left',
                                                        },
                                                        getContentAnchorEl:
                                                            null,
                                                        MenuListProps: {
                                                            className:
                                                                classes.optionDropdown,
                                                        },
                                                    }}
                                                    placeholder="Select Something"
                                                    native={false}
                                                >
                                                    <MenuItem
                                                        value=""
                                                        disabled
                                                        // className={
                                                        //     classes.optionItems
                                                        // }
                                                    >
                                                        Select Emotion
                                                    </MenuItem>
                                                    {emotions.map(
                                                        (emotion, i) => {
                                                            return (
                                                                <MenuItem
                                                                    key={i}
                                                                    // className={
                                                                    //     classes.optionItems
                                                                    // }
                                                                    value={
                                                                        emotion
                                                                    }
                                                                >
                                                                    {emotion}
                                                                </MenuItem>
                                                            );
                                                        }
                                                    )}
                                                </Select>
                                            </FormControl>
}

I want to remove opacity from the .MuiSelect-nativeInput Class. When I try to override this class using the nativeInput rule, I get this error message :-
Object literal may only specify known properties, and 'nativeInput' does not exist in type 'Partial<ClassNameMap<SelectClassKey>>'. Eventhough, nativeInput rule is given in the documentation of Select API. I have tried to override it in the Theme file but again, I get the error that nativeInput does not exist. How can I remove the opacity from the MuiSelect-nativeInput class.

The nativeInput class in the HTML
Respective Class CSS



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here