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 am looking to eliminate the opacity from the .MuiSelect-nativeInput Class. When attempting to override this class with the nativeInput rule, I encounter the following error message :-
Object literal may only specify known properties, and 'nativeInput' does not exist in type 'Partial<ClassNameMap<SelectClassKey>>'.nativeInput rule. I have made attempts to override it in the Theme file but continue to receive an error indicating that nativeInput does not exist. How can I remove the opacity from the MuiSelect-nativeInput class.
https://i.sstatic.net/xt3ZB.png https://i.sstatic.net/4aYJY.png