Как установить цвет границы и иконки в выделенном материале?

Question

Я новичок в MaterialUI. Вот как я использую простое поле ввода, которое выделено и имеет значок. Но так как мой фон темный, мне нужен цвет значка, рамки и текста более светлого цвета, например серого.

Какой материалUI способ сделать это?

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. Но есть и много других способов решить эту проблему. Вы также можете использовать стилизованные компоненты, например .

Material UI имеет отличную документацию. Вы можете прочитать много информации о решениях по стилю на этой странице . Вы также можете изменить тему по умолчанию , которая меняет стили для всех полей ввода. Или вы можете использовать темную версию темы Material UI, которая уже встроена.