Material ui Select change background and focused color

Question

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

Answer 1

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 Higher-Order Component API . Here's the sample based on what are you seeking for:

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 { WithStyles, withStyles } from "@mui/styles";

const styles = {
  root: {
    color: "white !important",
    background: "red !important",
    border: "1px solid yellow !important"
  }
};

export interface SelectProps {
  label: string;
  value: string | undefined;
  options: any;
  error?: boolean;
  className: string | undefined;
  onChange?: (value: string) => void;
}

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

  // this.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 : {}) }}
            className={this.props.className}
          >
            {this.props.options.map((option: any) => {
              return (
                <MenuItem key={option.value} value={option.label}>
                  {option.label ?? option.value}
                </MenuItem>
              );
            })}
          </Select>
        </FormControl>
      </div>
    );
  }
}

function FormDDownComponent(props: WithStyles<typeof styles>) {
  const { classes } = props;
  return (
    <FormDDown
      options={[
        { value: "single", label: "Single" },
        { value: "married", label: "Married" }
      ]}
      label="Family"
      value="0"
      className={classes.root}
    />
  );
}

export default withStyles(styles)(FormDDownComponent);