Question

我有一个带有文本字段和按钮的react组件。我希望它们在黑色背景上显示为绿色，并且无法更改所有元素的默认颜色。基于以下问题：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颜色

1 个答案: