reactjs - 如何设置缺口状的OutlinedInput的InputAdornment样式？

Question

我正在使用React JS和Material UI框架。

我需要文本字段内的装饰图标颜色表现得像输入边框一样。

如果您从文档中查看example，则可以在以下情况下看到该信息:

将鼠标悬停在输入上，边框将变宽且变黑

聚焦输入，边框将更宽并且具有原色

我发现这些设置来自 component的样式。

如何将这些规则颜色应用于图标？

另一个相关的问题-除了主色还是副色，最简单的方法是什么？仅通过覆盖文档中描述的类？

Answer 1

以下是如何执行此操作的示例-关键方面是outlinedInput类和(如果您还想同步标签)textField类。颜色可以是您要使用的任何颜色，但是在本示例中，我使用的主题颜色与边框使用的颜色相同。

import React from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import FormControl from "@material-ui/core/FormControl";
import Visibility from "@material-ui/icons/Visibility";
import VisibilityOff from "@material-ui/icons/VisibilityOff";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  margin: {
    margin: theme.spacing(1)
  },
  textField: {
    width: 200,
    "&:hover .MuiInputLabel-root": {
      color: theme.palette.text.primary
    },
    "& .Mui-focused.MuiInputLabel-root": {
      color: theme.palette.primary.main
    }
  },
  outlinedInput: {
    "&:hover .MuiInputAdornment-root .MuiSvgIcon-root": {
      color: theme.palette.text.primary
    },
    "&.Mui-focused .MuiInputAdornment-root .MuiSvgIcon-root": {
      color: theme.palette.primary.main
    }
  }
}));

export default function InputAdornments() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    password: "",
    showPassword: false
  });

  const handleChange = prop => event => {
    setValues({ ...values, [prop]: event.target.value });
  };

  const handleClickShowPassword = () => {
    setValues({ ...values, showPassword: !values.showPassword });
  };

  const handleMouseDownPassword = event => {
    event.preventDefault();
  };

  return (
    <div className={classes.root}>
      <div>
        <FormControl
          className={clsx(classes.margin, classes.textField)}
          variant="outlined"
        >
          <InputLabel htmlFor="outlined-adornment-password">
            Password
          </InputLabel>
          <OutlinedInput
            id="outlined-adornment-password"
            type={values.showPassword ? "text" : "password"}
            value={values.password}
            onChange={handleChange("password")}
            className={classes.outlinedInput}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                  edge="end"
                >
                  {values.showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
            }
            labelWidth={70}
          />
        </FormControl>
      </div>
    </div>
  );
}

评论中的后续问题:

How to correctly override multiple classes? I see that it works and I understand your explanation, however- it seems that I don't quite understand where I need to add space between the classes names or after '&:hover'. For example in my demo in order to color the label when focused, I wrote "&.Mui-focused.MuiInputLabel-root" while in your demo it's "& .Mui-focused.MuiInputLabel-root" with space after "& ". Of course, the difference is because I applied the styles on InputLabel and you on the TextField, but why does it differ?

&指的是为当前样式规则生成的CSS类(例如 classes.textField或 classes.outlinedInput)。该空间是 descendant CSS selector。具有“MuiInputLabel-root”类的元素是接收 classes.textField类的元素的后代，因此 & .Mui-focused.MuiInputLabel-root成功定位了标签。如果没有空格，它将仅定位到具有 classes.textField类和 MuiInputLabel-root类的元素。如果将 classes.textField类应用到label元素，则可以使用，但是由于我们需要将鼠标悬停在整个输入上，而不只是将标签定位在标签上，因此需要将该类应用于父类。

相关文件:

https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use--to-reference-selector-of-the-parent-rule

https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator