I want to change the backroundcolor of the select component"grey", and the label and the border color from blue to another color,it appears when i click on the select box.Can anyone hepl me in that?

I got tis error: 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>'.

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

CodePudding user response：

The problem which you have is because of using useStyles()! you can't use classes = useStyles() in class components. Its a hook which is used in functional component. Instead of that you should use