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

【问题标题】：How to override default MaterialUI styles with React?如何使用 React 覆盖默认的 MaterialUI 样式？
【发布时间】：2019-11-21 17:24:44
【问题描述】：

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

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

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 组件的功能。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

当您单击材质 UI 中的输入字段时，类名称会发生更改，并且会为 label field 应用不同的样式。

更具体地说，.MuiInputLabel-shrink 类被添加到标签元素中。如果你想定位这个样式，你必须在你的withStyles()中引用这个类

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

【讨论】：