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

Question

我有一个带有文本字段和按钮的反应组件。我希望它们在黑色背景上显示为绿色，并且我无法更改所有元素的默认颜色。基于这个问题：How to change outline color of Material UI React input component?；我能够更改轮廓和标签颜色。但是我找不到任何方法来更改用户输入的文本的颜色。我想我必须覆盖另一个属性，但我没有找到哪个。

提前感谢您帮助我。

问候

代码 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

TestComponent 中的代码

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

class TestComponent extends Component {
  constructor(props) {
    super(props)
  }

  render () {

    return (
      <div style={{ display: 'flex', flexDirection: 'column', backgroundColor:'black' }}>
        <TextField id="Password" variant="outlined" required label="Password" style={{width:'150px', margin:'20px'}}/>
        <Button style={{width:'150px', margin:'20px'}} color="primary" variant="contained" onClick={() => console.log('OK')}>
         OK
        </Button>
      </div>
    );
  }

}

export default TestComponent

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> 等其他组件之上的抽象，所以您不能只将您的样式传递给@987654327直接@；您必须使用<InputProps>。有关详细信息，请参阅<TextField> 的MUI API。）