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

Posted 2023-03-06

【中文标题】无法更改 Material-UI OutlinedInput 的边框颜色

【英文标题】：Can't change border color of 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>

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

【参考方案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>
  );

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

Change outline for OutlinedInput with React material-ui Global outlined override Change border color on Material-UI TextField

---

这是一个类似的例子，但对于 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>
  );