Changing TextField color in a react/material ui

Question

I have a react component with a text field and a button. I want them to appear green on a black background, and I'm not able to change the default colors of all elements. Based on this question : How to change outline color of Material UI React input component? ; I was able to change outline, and label color. But I don't find any way to change also the color of the text entered by the user. I suppose I must overrides another property, but I didn't find which one.

Thanks in advance for helping me.

Regards

code 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;

code from 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

code from 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

Solution

just add a simple 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);

here you go , working link: https://codesandbox.io/s/wizardly-river-gd4d2

(Note that, because you're working with a <TextField>, which is an abstraction on top of other components like <FormControl>, <InputLabel>, etc., you can't just pass your styles into <TextField> directly; you must use <InputProps>. See the MUI API for <TextField> for details.)

Comments

[0xAnon]

hey bro, below is my answwer

[FrancoisC]

Hey Raj, thanks a lot for your answer. Just a complement : in your working link, when textfield lose focus, label (password) disappearred, any idea why ?

[0xAnon]

that i don't know, must be something missing in props, wait a minute

[0xAnon]

you have added: this line ``` MuiFormLabel: { root: { // "&$focused": { color: "#2EFF22" // } } }``` it's causing color to be green only on focus, open my link again

[FrancoisC]

Yes exactly. Thanks a lot

[0xAnon]

glad to help :)