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

Question

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

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

如果您查看文档中的 example，您会发现当：

将鼠标悬停在输入框上，边框会变宽变黑
聚焦输入，边框会更宽并具有原色

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

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

另一个相关问题 - 除了主要颜色或次要颜色之外，最简单的颜色是什么？只能按照文档中的描述覆盖类?

Answer 1

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

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

Follow-up 评论中的问题：

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?

&是指为当前样式规则生成的CSSclass（例如classes.textField或classes.outlinedInput）。 space 是 descendant CSS selector。具有 "MuiInputLabel-root" class 的元素是接收 classes.textField class 的元素的后代，因此 & .Mui-focused.MuiInputLabel-root 成功定位到标签。如果没有 space，它只会定位具有 classes.textField class 和 MuiInputLabel-root class 的元素。如果 classes.textField class 被应用到标签元素，那么这会起作用，但是由于我们需要将鼠标悬停在整个输入上而不只是标签上，因此 class 需要应用于父项。

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

How to style InputAdornment like notched OutlinedInput?

reactjs

material-ui

jss