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

Question

当使用带有 React 的 Material UI 时，我无法使用我想要的属性设置 Outline Select 组件的样式，如何覆盖默认样式？

我使用了 withStyles 但我无法达到预期的外观和感觉。 例如，如果我在 Select 中使用自定义输入更改边框，则标签不会按预期工作，边框和标签接触而不是像 float 的标签。

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

我希望只设置我需要的样式，并且不会破坏 OutlineSelect 组件的功能。

Answer 1

当您在 Material UI 中单击输入字段时，类名称会更改，并且会向 label 字段 应用不同的样式。

更具体地说，类 .MuiInputLabel-shrink 被添加到标签元素。如果您想针对此样式，则必须在 withStyles()

中引用此类

请在此处查看输入标签 API: https://material-ui.com/api/input-label/#main-content