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 override certain default styling, but am having a hard time understanding how the overrides option works.

Currently my button looks like this: The code I've got to get this far looks like this:

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

Then in my component, I'm using it as such:

import theme from './styles/ThemeStyles';
import { withStyles } from '@material-ui/core/styles';

class SignInForm extends Component {
render() {
    const { classes } = this.props;
    <form className={classes.container} noValidate autoComplete='off'>
        <TextField
            id="outlined-email-input"
            label="Email"
            className={classes.textField}
            type="email"
            name="email"
            autoComplete="email"
            margin="normal"
            variant="outlined"
        />
    </form>
}}

My question is, what am I missing to make my component look so funky? And in the future, how do I know what to target in the overrides option of the ThemeProvider so that I don't run into similar situations?

I answered the question but you may want to file a bug with Material UI, I don't think it's intentional that they don't have notched outline specific styling that's passed through the outlinedinput for the various states. — , Dec 13 '18 at 19:30
Seems they may have fixed the docs now... see [answer below](https://stackoverflow.com/a/55820364/1062992). — egerardus, Apr 23 '19 at 22:47

score 32 · Accepted Answer · answered Dec 14 '18 at 03:39

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'
            }
        }
    }

nice work! it isn't obvious from the Material UI documentation that all sorts of CSS selectors can be used. — , Dec 14 '18 at 04:50
So true. I started out with Semantic UI and had issues with responsiveness, but Material UI is giving me its own headaches. — J. Jackson, Dec 14 '18 at 14:55
'&:hover $notchedOutline' (i.e. $notchedOutline) was the thing I needed, thanks! — JimiSweden, May 20 '20 at 11:36

score 10 · Answer 2 · answered Dec 13 '18 at 19:25

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'
      },
    },
    // ...
  }
});

I appreciate the very good and thorough answer! It appears as though nothing has changed with the styling of the input from the image I included in my original post though, unfortunately. I wonder if I might have some other styles somehow overwriting it? I know that before I was able to give it a blue border and was using the `overrides` property, that the focused state of the input was white for some reason. — J. Jackson, Dec 14 '18 at 03:23
@J.Jackson I actually tried another approach, using `withStyles` to wrap the element, however that didn't quite work either. You may want to consider creating your own outlined input that's a subclass of `OutlinedInput` that correctly styles the notchedOutline. I think a custom component may be the best option. — , Dec 14 '18 at 04:49

egerardus · Answer 3 · 2019-04-23T23:25:05.633

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)

how to implement this in autocomplete. https://codesandbox.io/s/tfgz5 it only change the lable color — Vinoth, Jul 23 '19 at 11:32

score 0 · Answer 4 · answered Feb 27 '19 at 01:03

0

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

answered Feb 27 '19 at 01:03

Daniel Ram

352
2
6

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

4 Answers4

Linked