更改反应/材料 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 = {&nbsp; root: {&nbsp; &nbsp; background: "black"&nbsp; },&nbsp; input: {&nbsp; &nbsp; color: "#2EFF22"&nbsp; }};class TestComponent extends React.Component {&nbsp; render() {&nbsp; &nbsp; const { classes } = this.props;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: "flex",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flexDirection: "column",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: "black"&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="Password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label="Password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; InputProps={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className: classes.input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ width: "150px", margin: "20px" }}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ width: "150px", margin: "20px" }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="primary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="contained"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => console.log("OK")}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OK&nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default withStyles(styles)(TestComponent);给你，工作链接：https : //codesandbox.io/s/wizardly-river-gd4d2（需要注意的是，因为你有工作<TextField>，这是对像其他组件之上的抽象<FormControl>，<InputLabel>等等，你不能只是通过你的风格融于<TextField>直接，你必须使用<InputProps>请参阅MUI API。<TextField>了解详情。 )