Change MUI TextField border-color

Question

I want to change the border color of the material UI TextField Component when it gets focused without using a theme that wrapps the entire app. I am using styled components and nextjs in my project and the official documentation is not leading anywhere.

I inspected the TextField and tried to apply changes directly by adressing the class. Without any effect.

const StyledInput = styled(TextField)`
  width: 100%;
  &.MuiInputLabel-root.Mui-focused {
    color: white;
  }
`;

Answer 1

The answer depends on what variant of text field you are using.

If you are using 'standard' variant:

const StyledInput = styled(TextField)`
  width: 100%;
  & .MuiInput-underline::before {
    border-color: yellow !important;
  }
  & .MuiInput-underline::after {
    border-color: orange;
  }
`;

if you are using 'outlined' variant:

const StyledInput = styled(TextField)`
   width: 100%;
   & .MuiOutlinedInput-notchedOutline {
      border-color: red;
   }
   & .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
      border-color: orange;
   }
`;

You can see working example at https://codesandbox.io/s/material-demo-pu652?fontsize=14