如何像带缺口的 OutlinedInput 一样设置 InputAdornment 的样式？

Question

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

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

如果您查看文档中的示例，您可以看到：

• 悬停输入，边框会变宽变黑
• 聚焦输入，边框会更宽并具有原色

我发现这些设置来自给组件的样式 。

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

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

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

评论中的后续问题：

如何正确覆盖多个类？我看到它有效并且我理解您的解释，但是 - 似乎我不太明白我需要在类名称之间或“＆：悬停”之后添加空格的位置。例如，在我的演示中，为了在聚焦时为标签着色，我写了“&.Mui-focused.MuiInputLabel-root”，而在您的演示中，它是“& .Mui-focused.MuiInputLabel-root”，“&”后有空格。当然，不同是因为我在InputLabel上应用了样式，而你在TextField上应用了样式，但为什么不同呢？

该&指当前样式规则（如生成的CSS类classes.textField或classes.outlinedInput）。空格是一个后代 CSS 选择器。具有“MuiInputLabel-root”类的元素是接收classes.textField该类的元素的后代，因此& .Mui-focused.MuiInputLabel-root成功定位标签。如果没有空间，它只会针对具有classes.textField类和MuiInputLabel-root类的元素。如果classes.textField类被应用于标签元素，那么这将起作用，但由于我们需要将鼠标悬停在整个输入上，而不仅仅是标签，因此类需要应用于父元素。

相关文档：

• 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