无法更改 Material-UI OutlinedInput 的边框颜色答案

【问题标题】：Can't change border color of Material-UI OutlinedInput无法更改 Material-UI OutlinedInput 的边框颜色
【发布时间】：2019-11-19 08:59:52
【问题描述】：

我正在尝试更改 v4.13 MaterialUI Outlined Input 的边框颜色。但是，在尝试覆盖 CSS 时，我没有任何工作。

我尝试了多个 CSS 规则应用于每个元素，select 和 OutlinedInput，下面的两个是最新的。我在这里做错了什么？

const styles = () =>
  createStyles({
    select: {
      "&:before": {
        borderColor: "red"
      },
      "&:after": {
        borderColor: "red"
      },
    },
    outline: {
      "&:before": {
        borderColor: "red"
      },
      "&:after": {
        borderColor: "red"
      },
    }
  });

   <Select
      label={label}
      fullWidth={true}
      error={touched && invalid}
      className={inputStyles}
      classes={{ root: classes.select }}
      input={
        <OutlinedInput
          {...input}
          fullWidth={true}
          id={input.name}
          labelWidth={this.state.labelWidth}
          classes={{notchedOutline: classes.outline}}
        />
      }
      {...custom}
    >
      {children}
    </Select>

我可以在这里看到边框颜色的设置位置，但无法覆盖它。

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

这是一个示例，展示了如何在 v4 中执行此操作（v5 示例进一步向下）：

import React from "react";
import { makeStyles } 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";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));
const useOutlinedInputStyles = makeStyles(theme => ({
  root: {
    "& $notchedOutline": {
      borderColor: "red"
    },
    "&:hover $notchedOutline": {
      borderColor: "blue"
    },
    "&$focused $notchedOutline": {
      borderColor: "green"
    }
  },
  focused: {},
  notchedOutline: {}
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const outlinedInputClasses = useOutlinedInputStyles();
  const [values, setValues] = React.useState({
    age: "",
  });

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
          Age
        </InputLabel>
        <Select
          value={values.age}
          onChange={handleChange}
          input={
            <OutlinedInput
              labelWidth={labelWidth}
              name="age"
              id="outlined-age-simple"
              classes={outlinedInputClasses}
            />
          }
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

您可以在我的相关答案中阅读更多相关信息：

这是一个类似的例子，但对于 Material-UI v5 使用 styled：

import React from "react";
import { styled } from "@material-ui/core/styles";
import { outlinedInputClasses } 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";

const StyledForm = styled("form")(`
  display: flex;
  flex-wrap: wrap;
`);
const StyledFormControl = styled(FormControl)(({ theme }) => ({
  margin: theme.spacing(1),
  minWidth: 120
}));
const StyledSelect = styled(Select)(`
  & .${outlinedInputClasses.notchedOutline} {
    border-color: red;
  }
  &:hover .${outlinedInputClasses.notchedOutline} {
    border-color: blue;
  }
  &.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline} {
    border-color: lime;
  }
`);

export default function SimpleSelect() {
  const [values, setValues] = React.useState({
    age: ""
  });

  function handleChange(event) {
    setValues((oldValues) => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <StyledForm autoComplete="off">
      <StyledFormControl variant="outlined">
        <InputLabel id="outlined-age-simple-label">Age</InputLabel>
        <StyledSelect
          labelId="outlined-age-simple-label"
          value={values.age}
          onChange={handleChange}
          name="age"
          label="Age"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </StyledSelect>
      </StyledFormControl>
    </StyledForm>
  );
}

【讨论】：