css 无法更改材质-UI OutlinedInput的边框颜色

6yoyoihd 于 2023-02-17 发布在其他

关注(0)|答案(2)|浏览(159)

我正在尝试改变一个4.13版的MaterialUI输入框的颜色。但是当我试图覆盖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>

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

css

来源：https://stackoverflow.com/questions/56958742/cant-change-border-color-of-material-ui-outlinedinput

2条答案

按热度按时间

2ledvvac1#

下面的示例展示了如何在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>
  );
}

你可以在我的相关回答中读到更多关于这方面的信息：

使用React material-ui更改OutlinedInput的大纲
全局大纲覆盖
更改材质-用户界面TextField上的边框颜色

下面是一个类似的示例，但针对使用styled的Material-UI的v5：

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

赞(0）回复(0）举报 2023-02-17

gajydyqb2#

基于@Ryan Cogswell正确答案，这也可以在梅5中使用sx prop 完成，

<OutlinedInput
    name="age"
    onChange={handleChange}
    sx={{
        "& .MuiOutlinedInput-notchedOutline" : {
            borderColor : "red",
         },
        "&:hover > .MuiOutlinedInput-notchedOutline" : {
            borderColor : "lime"
         }
       }}
/>

赞(0）回复(0）举报 2023-02-17

我来回答

css 无法更改材质-UI OutlinedInput的边框颜色

2条答案

相关问题

热门标签

最新问答