Unable to change border color when focused and not focused of Material UI Input

Question

I'm not sure why I can't get this to work. I'm selecting the MuiInputBase-root element, telling it to select the field and set the border color to blue, and on focus set the border color to red. What am I doing wrong here?

Codesandbox

import React from "react";
import "./styles.css";

import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";

const useStyles = makeStyles(theme => ({
  root: {
    width: "20rem"
  },
  label: {
    background: "white",
    paddingRight: theme.spacing(0.5),
    "&.Mui-focused": {
      color: theme.palette.secondary.main
    }
  },
  closeIcon: {
    color: theme.palette.grey[400],
    "&.hidden": {
      display: "none"
    }
  },
  searchIcon: {
    color: theme.palette.primary.main
  }
}));

const useOutlinedInputStyles = makeStyles({
  root: {
    "& .MuiInputBase-root": {
      "& fieldset": {
        borderColor: "blue"
      },
      "&.Mui-focused fieldset": {
        borderColor: "red"
      }
    }
  }
});

export default function App() {
  const classes = useStyles();
  const outlinedInputStyles = useOutlinedInputStyles();
  return (
    <div className="App">
      <FormControl className={classes.root} variant="outlined">
        <InputLabel className={classes.label} htmlFor="search-input">
          placeholder
        </InputLabel>
        <OutlinedInput
          classes={outlinedInputStyles}
          id="search-input"
          labelWidth={70}
        />
      </FormControl>
    </div>
  );
}

score 8 · Accepted Answer · edited Apr 22 '20 at 14:06

8

The issue is that the .MuiInputBase-root is not a child of the root element (the .MuiOutlinedInput-root element), it's actually exactly the same element, so that layer is unnecessary. Also, type selectors (e.g. fieldset) have lower specificity than class selectors, so &.Mui-focused fieldset does not have sufficient specificity to override the default focused styles. Instead of fieldset you can use the class selector .MuiOutlinedInput-notchedOutline.

So instead of:

root: {
  "& .MuiInputBase-root": {
    "& fieldset": {
      borderColor: "blue"
    },
    "&.Mui-focused fieldset": {
      borderColor: "red"
    }
  }
}

You should have:

  root: {
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "blue"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    }
  }

Related answer: Change border color on Material-UI TextField

edited Apr 22 '20 at 14:06

Ryan Cogswell

75,046
9
218
198

answered Apr 22 '20 at 13:52

Dekel

60,707
10
101
129

I think I'm starting to get the hang of this, thanks :) – Mike K Apr 22 '20 at 14:25
@RyanCogswell thanks for your edit and the additional info, however there is no need for the `@MuiOutlinedInput` there. Check this: https://codesandbox.io/s/practical-albattani-pl8d3 as you can see - border is blue, and red on hover. – Dekel Apr 22 '20 at 14:26
In my example when I focus the border is red. Do you see something else there? – Dekel Apr 22 '20 at 14:30
@Dekel Yours works because you left in the `&.MuiInputBase-root` layer which increases the specificity a different way. If you take out that layer (as I did in the answer), `fieldset` is no longer sufficient. – Ryan Cogswell Apr 22 '20 at 14:32
now I see what you did there :) I didn't notice you removed it (I used the original code, mostly because sometimes it's just an example and is part of something bigger). – Dekel Apr 22 '20 at 14:39
1

@Dekel I felt that the original inclusion of `& .MuiInputBase-root` was the result of confusion (probably copy/paste from root styles of a `TextField` rather than `OutlinedInput` where `.MuiInputBase-root` **would** target a descendant) and that it was clearer to remove it than fix it by removing the space. I waffled (etiquette-wise) between adding a second answer (which I was halfway through writing when your answer popped in) vs. editing yours. – Ryan Cogswell Apr 22 '20 at 14:44

Unable to change border color when focused and not focused of Material UI Input

1 Answers1