如何在轮廓的materialUI输入中设置边框和图标的颜色？

Question

我是 materialUI 的新手。这就是我使用简单输入字段的方式，该字段带有轮廓并带有图标。但由于我的背景很暗，我需要图标的颜色、边框和较浅颜色的文本，例如灰色。

materialUI 的方法是什么？

import Input from '@material-ui/core/OutlinedInput'
import InputAdornment from '@material-ui/core/InputAdornment'
import AccountCircle from '@material-ui/icons/AccountCircle'

<Input
    name='username'
    type='text'
    placeholder='Username'
    startAdornment={
      <InputAdornment position='start'>
        <AccountCircle />
      </InputAdornment>
    }
/>

Answer 1

您可以使用以下代码实现此目的：

import React from "react";
import Input from "@material-ui/core/OutlinedInput";
import InputAdornment from "@material-ui/core/InputAdornment";
import AccountCircle from "@material-ui/icons/AccountCircle";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(4),
    backgroundColor: theme.palette.common.black
  },
  input: {
    color: theme.palette.common.white,

    "&:hover $notchedOutline": {
      borderColor: theme.palette.grey[400]
    },
    "&$focused $notchedOutline": {
      borderColor: theme.palette.grey[400]
    },
  },
  notchedOutline: {
    borderColor: theme.palette.grey[400]
  },
  focused: {},
  adornedStart: {
    color: theme.palette.grey[400]
  }
}));

export default function Demo() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Input
        classes={{
          root: classes.input,
          notchedOutline: classes.notchedOutline,
          focused: classes.focused,
          adornedStart: classes.adornedStart
        }}
        name="username"
        type="text"
        placeholder="Username"
        startAdornment={
          <InputAdornment position="start">
            <AccountCircle />
          </InputAdornment>
        }
      />
    </div>
  );
}

CodeSandbox

在我的示例中，我使用了 Material UI 自己的样式解决方案。但是还有很多其他的方法可以解决这个问题。例如，您也可以使用styled components。

Material UI 有很好的文档。您可以在 this page 上阅读很多关于样式解决方案的信息。您还可以change the default theme 更改所有输入字段的样式。或者你可以使用已经内置的 Material UI 主题的dark version。