How to change the style of a <Textfield /> from Material UI

Question

I’m trying to change the focus color of Textfield but I can’t with any method described in the documentation.

      <TextField
        className={styles.Input}
        required
        label="DDD Origem"
        value={this.state.origin}
        onChange={this.handleChange("origin")}
        variant="outlined"
        margin="dense"
      />

Solved:

I solved the problem by passing the style through the prop 'Inputprops' and 'Inputlabelprops'

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

const styles = theme => ({
  root: {
    marginBottom: ".5em"
  },

  cssLabel: {
    "&$cssFocused": {
      color: "#2b2b2b !important"
    }
  },

  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: "#2b2b2b !important"
    }
  },

  cssFocused: {},
  notchedOutline: {}
});

function UITextField(props) {
  const { classes } = props;
  return (
    <TextField
      variant="outlined"
      margin="dense"
      {...props}
      className={classNames(props.classes.root, props.className)}
      InputLabelProps={{
        classes: {
          root: classes.cssLabel,
          focused: classes.cssFocused,
        }
      }}
      InputProps={{
        classes: {
          root: classes.cssOutlinedInput,
          focused: classes.cssFocused,
          notchedOutline: classes.notchedOutline
        }
      }}
    >
      {props.children || undefined}
    </TextField>
  );
}

UITextField.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
};

export default withStyles(styles)(UITextField);

Answer 1

The Textfield is a wrapper of Input.

To change the layout, I advise you to use the Input directly, using the prop "classes" with the help of API of classes they provide at the end of the page about the Input.

Example to change the Focus:

  <Input
    classes={{ focus: styles.focus }}
    className={styles.Input}
    required
    label="DDD Origem"
    value={this.state.origin}
    onChange={this.handleChange("origin")}
    variant="outlined"
    margin="dense"
  />