Невозможно изменить цвет границы, когда сфокусировано и не сфокусировано на входе пользовательского интерфейса материала

Question

Я не уверен, почему я не могу заставить это работать. Я выбираю элемент MuiInputBase-root, приказываю ему выбрать поле и установить синий цвет рамки, а в фокусе установить красный цвет границы. Что я тут не так делаю?

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>
  );
}

Answer 1

Проблема в том, что .MuiInputBase-root не является дочерним элементом элемента root (элемент .MuiOutlinedInput-root), это фактически точно такой же элемент, поэтому этот слой не нужен. Кроме того, селекторы типа (например, fieldset) имеют меньшую специфичность , чем селекторы классов, поэтому &.Mui-focused fieldset не обладает достаточной специфичностью для переопределения стандартных фокусированных стилей . Вместо fieldset вы можете использовать селектор класса .MuiOutlinedInput-notchedOutline.

Так что вместо:

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

Вы должны иметь:

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

Связанный ответ: Изменить цвет границы для Material-UI TextField