How to change outline color of Material UI React input component?

Question

I\'ve searched high and low for an answer, in both the docs and other SO questions.

I\'m using the createMuiTheme option in a separate JS file to overri

Answer 1

This is covered in the docs pretty well here.

Click inside the field labelled "Custom CSS" for a demo.

Here's how this could be done using your original TextField component:

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 = theme => ({
  textField: {
    marginLeft: theme.spacing.unit * 3,
    marginBottom: '0px',
  },
  label: {
    '&$focused': {
      color: '#4A90E2'
    },
  },
  focused: {},
  outlinedInput: {
    '&$focused $notchedOutline': {
      border: '1px solid #4A90E2'
    },
  },
  notchedOutline: {},
})

const CustomOutline = ({classes}) => (
  <TextField
    id="outlined-email-input"
    label="Email"
    className={classes.textField}
    type="email"
    name="email"
    autoComplete="email"
    margin="normal"
    variant="outlined"
    InputLabelProps={{
      classes: {
        root: classes.label,
        focused: classes.focused,
      },
    }}
    InputProps={{
      classes: {
        root: classes.outlinedInput,
        focused: classes.focused,
        notchedOutline: classes.notchedOutline,
      },
    }}
  />
)

CustomOutline.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(CustomOutline)

Answer 2

To find the class names and CSS properties that you can change, the documentation for the Component API shows a list.

TextField is a special case though, because it combines and renders multiple sub-components, it allows you to pass CSS properties to the Input component and the FormHelperText component.

And the OutlinedInput is a very special case, because it actually uses NotchedInput for the input element which has its own CSS properties.

Looking at the code for the OutlinedInput you can see child selectors being used:

root: {
  position: 'relative',
  '& $notchedOutline': {
    borderColor,
},
// ...

It looks like the issue is that the OutlinedInput doesn't set the styles for the NotchedOutline correctly

You may have some luck with this:

const theme = createMuiTheme({
  // ...other code,
  overrides: {
    // ...
    MuiOutlinedInput: {
      focused: {
        border: '1px solid #4A90E2'
      },
      '& $notchedOutline': {
        border: '1px solid #4A90E2'
      },
    },
    // ...
  }
});

Answer 3

Thanks to Rudolf Olah's help and pointing me in the right direction! I was able to solve the issue with the following code:

overrides: {
    MuiOutlinedInput: {
        root: {
            position: 'relative',
            '& $notchedOutline': {
                borderColor: 'rgba(0, 0, 0, 0.23)',
            },
            '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
                borderColor: '#4A90E2',
                // Reset on touch devices, it doesn't add specificity
                '@media (hover: none)': {
                    borderColor: 'rgba(0, 0, 0, 0.23)',
                },
            },
            '&$focused $notchedOutline': {
                borderColor: '#4A90E2',
                borderWidth: 1,
            },
        },
    },
    MuiFormLabel: {
        root: {
            '&$focused': {
                color: '#4A90E2'
            }
        }
    }

Answer 4

I found the solution here: The authors of the framework did not really cover this in the docs that well.

https://github.com/mui-org/material-ui/issues/13557