How to style TextFields input color?

[quantuminformation]

There is no guidance on how to change the text colour of these inputs https://material-ui.com/demos/text-fields/

Do we just use external css to do this?

I also tried this but it doesn't pass TypeScript checks:

 <TextField
          inputProps={{ style: { fontFamily: 'Arial', color: 'white'}}}
          style={{ flex: 1, margin: '0 20px 0 0', color: 'white'}}
          onChange={(e: ChangeEvent<HTMLInputElement>) => changeSearch(e.target.value)}
          type="text"
          value={reducerState.search}
        />

(50,11): error TS2339: Property 'inputProps' does not exist on type 'IntrinsicAttributes & TextFieldProps & { children?: ReactNode; }'.

This might be purely a TypeScript types issue

[oliviertassinari]

@quantuminformation I'm glad you found a solution. I would encourage people to do it this way:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    background: "black"
  },
  input: {
    color: "white"
  }
};

function CustomizedInputs(props) {
  const { classes } = props;

  return (
    <TextField
      defaultValue="color"
      className={classes.root}
      InputProps={{
        className: classes.input
      }}
    />
  );
}

CustomizedInputs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CustomizedInputs);

https://codesandbox.io/s/1370v7y4zj

Notice that you can also target the global class names (.MuiInputBase-root and .MuiInputBase-input).

[pankajparkar]

Any updates, how to make it working with @material-ui/core? I'm badly stuck at this

[oliviertassinari]

@pankajparkar I have updated my previous answer to work with the latest version: #9574 (comment). I hope that help, let me know! Alternatively, we have a customization demo in https://material-ui.com/demos/text-fields/#customized-inputs.

[pankajparkar]

@oliviertassinari thanks alot. I had to remove label to make it working.
Do you have any solution / workaround to make it working with label. I understand why label gets overlay (I kind of partially sorted it by applying z-index, but that led to different problems).

Problem codepen here

[AjithkumarJM]

@oliviertassinari thanks alot. I had to remove label to make it working.
Do you have any solution / workaround to make it working with label. I understand why label gets overlay (I kind of partially sorted it by applying z-index, but that led to different problems).

Problem codepen here

I also need exactly the same!

[YohanObadia]

@quantuminformation I'm glad you found a solution. I would encourage people to do it this way:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    background: "black"
  },
  input: {
    color: "white"
  }
};

function CustomizedInputs(props) {
  const { classes } = props;

  return (
    <TextField
      defaultValue="color"
      className={classes.root}
      InputProps={{
        className: classes.input
      }}
    />
  );
}

CustomizedInputs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CustomizedInputs);

https://codesandbox.io/s/1370v7y4zj

Notice that you can also target the global class names (.MuiInputBase-root and .MuiInputBase-input).

Thanks for the solution but how would you do it if color is actually a parameter you want to pass to the CustomizedInput and not a static value as is the case in your example ?

In my case I get an error : Invalid prop 'className' of type 'object' supplied to 'ForwardRef(InputBase)', expected 'string'

The section of my code that is of interest. It is a React.Component btw.

render () {
        let {error, editValue} = this.state;
        const isError = error!==""
        const classes = {inputStyle:{color:this.props.color}}
        return (
            <TextField
            error={isError}
            id={'edit-'+this.props.fieldId}
            value={editValue}
            placeholder=""
            helperText={isError?error:""}
            size="small"
            onChange={this.onInputchange}
            onBlur={this.handleBlur}
            InputProps={{
                className: classes.inputStyle
            }}
            multiline
            />
          );
    };

[Ridoineel]

no inputProps, this's InputProps,

capitale "I"

[Duoquote]

Would love to see something like that to dynamically change the color.

[squirrl]

Sorry to resurrect a dead thread, but in case someone comes across this with the same question:

Would love to see something like that to dynamically change the color.

<TextField> generates a three layer tree, with a grandparent <div> (MuiFormControl), parent <div> (MuiInputBase), and child <input> (MuiInput).

Other ways to do it are probably better, but if you have some specific need for inline styling you can pass props to the grandchild via the InputBase/inputBase props (note the capitalizations of 'I' and 'i'):

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