更改 react/material ui 中的 TextField 颜色

Question

我有一个带有文本字段和按钮的 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

来自 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);

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

（请注意，因为您正在使用 <TextField>，它是对其他组件（如 <FormControl>、<InputLabel> 等）的抽象，您可以不要直接将您的样式传递给 <TextField>；您必须使用 <InputProps>。有关详细信息，请参阅 <TextField> 的 MUI API。）

Answer 2

您也可以使用内联样式来完成此操作，但应尽可能避免：

<TextField InputProps={{ inputProps: { style: { color: '#fff' }}}} />

https://github.com/mui/material-ui/issues/9574#issuecomment-1145447200

更改 react/material ui 中的 TextField 颜色

Changing TextField color in a react/material ui

javascript

textfield

reactjs

material-ui