更改反应/材料 ui 中的 TextField 颜色

Question

我有一个带有文本字段和按钮的反应组件。我希望它们在黑色背景上显示为绿色，并且我无法更改所有元素的默认颜色。基于这个问题：如何更改 Material UI React 输入组件的轮廓颜色？; 我能够更改轮廓和标签颜色。但是我找不到任何方法来更改用户输入的文本的颜色。我想我必须覆盖另一个属性，但我没有找到哪个。预先感谢您帮助我。问候代码 App.js ：import TestComponent from './TestComponent.js'import {ThemeProvider } from '@material-ui/core/styles';import theme from './Theme.js'function App() {  return (    <ThemeProvider theme={theme}>        <div>        <TestComponent/>      </div>    </ThemeProvider>  );}export default App;来自 Theme.js 的代码const Theme = createMuiTheme({  palette: {    primary: {      main: '#2EFF22',    },    secondary: { main: '#22BF19' },    grey: { main: '#22BF19' }  },  overrides: {    MuiOutlinedInput: {      root: {        position: 'relative',        '& $notchedOutline': {          borderColor: '#2EFF22',        },        '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {          borderColor: '#2EFF22',          // Reset on touch devices, it doesn't add specificity          '@media (hover: none)': {            borderColor: '#2EFF22',          },        },        '&$focused $notchedOutline': {          borderColor: '#2EFF22',          borderWidth: 1,        },      },    },    MuiFormLabel: {      root: {        '&$focused': {          color: '#2EFF22'        }      }    }  }})export default Theme

Answer 1

只需添加一个简单的 HOC withStyles。

import React from "react";

import Button from "@material-ui/core/Button";

import TextField from "@material-ui/core/TextField";

import { withStyles } from "@material-ui/core/styles";

const styles = {

  root: {

    background: "black"

  },

  input: {

    color: "#2EFF22"

  }

};

class TestComponent extends React.Component {

  render() {

    const { classes } = this.props;

    return (

      <div

        style={{

          display: "flex",

          flexDirection: "column",

          backgroundColor: "black"

        }}

      >

        <TextField

          id="Password"

          variant="outlined"

          required

          label="Password"

          InputProps={{

            className: classes.input

          }}

          style={{ width: "150px", margin: "20px" }}

        />

        <Button

          style={{ width: "150px", margin: "20px" }}

          color="primary"

          variant="contained"

          onClick={() => console.log("OK")}

        >

          OK

        </Button>

      </div>

    );

  }

}

export default withStyles(styles)(TestComponent);

给你，工作链接：https : //codesandbox.io/s/wizardly-river-gd4d2

（需要注意的是，因为你有工作<TextField>，这是对像其他组件之上的抽象<FormControl>，<InputLabel>等等，你不能只是通过你的风格融于<TextField>直接，你必须使用<InputProps>请参阅MUI API。<TextField>了解详情。 )