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}) => (
  
)

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

export default withStyles(styles)(CustomOutline)