notchedOutline class in OutlinedInput doesn't override

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

According to the documentation, I should be able to override the notchedOutline CSS by using classes:{{ notchedOutline: classes.foo }}.

Current Behavior 😯

This doesn’t seem to be working.

Steps to Reproduce 🕹

1. Create a css class for borderColor.

const useStyles= makeStyles((theme) => ({
notched: {
  paddingLeft: theme.spacing(6.5),
  borderColor: "green",
  "&:hover": "green",
  "&:focused": "green",
}
}})

1. Create a component that contains an outlined input.

export const InputComponent = () => {
  const classes = uesStyles();
  return (
    <FormControl variant="outlined">
      <InputLabel
        variant="outlined"
        htmlFor="input"
      >
        Input Label Text
      </InputLabel>
      <OutlinedInput
        id="input"
        labelWidth={100}
        classes={{ notchedOutline: classes.notched }}
      />
    </FormControl>
  );
};

The border color will not change and no padding will be applied.

Also, from the implementation it seems I should be able to override it by changing the root class, however this also doesn’t work.

Context 🔦

I have an onChange prop that determines if the input is valid. If it’s valid, I want the border color to change to green. I also have an onSubmit prop on my form that also determines if the input is invalid, and if it’s invalid then it changes the border color to red. Otherwise if the input is invalid but the user has not submitted the form, the border color should be the default color (theme.palette.primary.main).

I also have a startAdornment and need to move the notch further right, so I need to increase paddingLeft (I have already handled the label transition).

Your Environment 🌎

Tech	Version
Material-UI	4.0.0-alpha.8
React	16.8.6
Browser	Chrome
TypeScript	3.4.5

[ryancogswell]

Please see my answer here: https://stackoverflow.com/questions/54325908/change-outline-for-outlinedinput-with-react-material-ui/54331012#54331012

Here’s a modified version of my example in that answer that shows doing a green border: https://codesandbox.io/s/vx057jo47

If after this, you still have difficulty with the padding portion, I recommend creating a StackOverflow question that includes a version of your code with the input adornment and explains what the desired look is.

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however, this issue appears to be a support request or question. Please ask on StackOverflow where the community will do their best to help. There is a “material-ui” tag that you can use to tag your question.

If you would like to link from here to your question on SO, it will help others find it. If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.