I am looking to customize the appearance of the select component by changing the background color to "grey", as well as adjusting the label and border colors from blue to a different color when clicking on the select box. Can anyone assist me with this?
Below is the error I encountered:
TS2322: Type '{ root: string; }' is not assignable to type 'Partial<SelectClasses>'.
Object literal may only specify known properties, and 'root' does not exist in type 'Partial<SelectClasses>'.
https://i.sstatic.net/a3ynu.png
import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles((theme) => ({
selectRoot: {
'&:focus':{
backgroundColor:'yellow'
}
}
}));
export interface SelectProps {
label: string;
value:string | undefined;
options:any;
error?: boolean;
onChange?: (value: string) => void;
}
export class FormDDown extends React.Component<SelectProps, {
value: string;
}> {
constructor(props: SelectProps) {
super(props);
this.state = {value: ''};
}
private handleChange = (event: SelectChangeEvent) => {
this.setState({value: event.target.value});
// notify the callback if present
this.props.onChange?.(event.target.value);
}
classes = useStyles();
render() {
let id = this.props.value ?? this.props.label;
let errorBorder = { borderBottom: '2px solid red' };
return(
<div className='forminput'>
<FormControl variant="filled" fullWidth>
<InputLabel id="demo-simple-select-helper-label">{this.props.label}</InputLabel>
<Select
variant="filled"
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={this.props.value}
autoWidth
onChange={this.handleChange}
style={{...(this.props.error ? errorBorder : {})}}
classes={{ root: this.classes.selectRoot }}
>
{this.props.options.map((option:any) => {
return (
<MenuItem key={option.value} value={option.label}>
{option.label ?? option.value}
</MenuItem>
);
})}
</Select>
</FormControl>
</div>
)
}
}