如何使用React覆盖默认的MaterialUI样式？

Question

I can´t style the Outline Select component with the properties I want when using Material UI with react, how can override default styles?

I have used withStyles but I can't achieve the expected look and feel. For example if I change the border using a custom Input in the Select, then the Label doesn't work as expected, the border and the label touch instead of the label like floating.

import { createStyles, makeStyles, withStyles } from '@material-ui/core/styles';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

export const StyledSelect = ({ name, value, onChange, items }) => {
  const classes = useStyles();
  const inputLabel = React.useRef<HTMLLabelElement>(null);
  const [labelWidth, setLabelWidth] = React.useState(0);

  React.useEffect(() => {
    setLabelWidth(inputLabel.current!.offsetWidth);
  }, []);
  return (
    <FormControl variant="outlined" />
      <InputLabel
        ref={inputLabel}
        htmlFor={name}
      >
        {name}
      </InputLabel>
      <Select
        value={value || ''}
        onChange={onChange}
        input={<CustomInput labelWidth={labelWidth} />}
      >
        {items.map(item => {
          return (
            <MenuItem key={item.key} value={item}>
              {item.label}
            </MenuItem>
          );
        })}
      </Select>
    </FormControl>
  );
};


const CustomInput = withStyles(theme => ({
  root: {
    'label + &': {
      /* marginTop: theme.spacing(3), */
    },
  },
  /* label: {
    width: '',
  }, */
  input: {
    'borderRadius': 4,
    'position': 'relative',
    /* 'backgroundColor': theme.palette.background.paper, */
    'border': '2px solid #ced4da',
    /* 'fontSize': 16, */
    /* 'transition': theme.transitions.create(['border-color', 'box-shadow']), */
    // Use the system font instead of the default Roboto font.
    'fontFamily': [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
    '&:hover': {
      border: '2px solid red',
      borderRadius: 4,
    },
    '&:focus': {
      border: '2px solid #ced4da',
      borderRadius: 4,
      borderRadius: 4,
      borderColor: "#80bdff",
      boxShadow: "0 0 0 0.2rem rgba(0,123,255,.25)"
    },
  },
}))(OutlinedInput);

I expect to style only what I need and don't break the functionality of the OutlineSelect component.

Answer 1

When you click an input field in material UI the class names is changed and a different style is applied to the label field .

More specifically the class .MuiInputLabel-shrink is added to the label element. If you want to target this styling, you must reference this class in your withStyles()

See the imput-label API here: https://material-ui.com/api/input-label/#main-content