Обновление пользовательского интерфейса выберите стиль глобально с темой

Question

Я пытаюсь использовать следующее для обновления цвета границы всех моих выделенных выделений, но это не работает (по-видимому, стиль границы происходит от элемента fieldset). Я пробовал MuiOutlinedInput, но это относится ко всем входам. Есть ли способ нацелиться только на выделенный вариант?

  overrides: {
    MuiButton: {
      outlined: {
        '&:hover': {
          boxShadow: 'none'
        },
      },
      contained: {
        '&:hover': {
          boxShadow: 'none'
        },
      }
    },
    MuiSelect: {
      root: {
        '& $notchedOutline': {
          borderColor: 'red',
        },
      }
    }
  }

Answer 1

Проблема с тем, что вы пробовали, заключается в том, что элемент $notchedOutline не является потомком элемента .MuiSelect-root, а скорее родным братом. Общая структура выделенного контура примерно следующая (с опущенными менее значимыми деталями):

<div class="MuiFormControl-root">
   <div class="MuiOutlinedInput-root">
      <div class="MuiSelect-root MuiSelect-outlined MuiOutlinedInput-input">Displayed Text</div>
      <input type="hidden" value="Displayed Text">
      <fieldset class="MuiOutlinedInput-notchedOutline"><legend>less relevant details</legend></fieldset>
   </div>
</div>

Ниже приведен пример, который настраивает как контуры ввода, так и контуры выбора, используя разные цвета.

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "pink"
        },
        "&$focused $notchedOutline": {
          borderColor: "red"
        },
        color: "blue",

        "& .MuiSelect-root ~ $notchedOutline": {
          borderColor: "green"
        },
        "&$focused .MuiSelect-root ~ $notchedOutline": {
          borderColor: "orange"
        },
        "& .MuiSelect-root": {
          color: "purple"
        }
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField
        variant="outlined"
        label="Outlined Input"
        defaultValue="My Text"
      />
      <br />
      <br />
      <TextField
        variant="outlined"
        label="Outlined Select"
        select
        value="My Text 1"
      >
        <MenuItem value="My Text 1">My Text 1</MenuItem>
        <MenuItem value="My Text 2">My Text 2</MenuItem>
      </TextField>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Соответствующие ответы и документация:

• https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
• Глобальное переопределение контура
• Изменение контура для OutlinedInput с React material-ui
• Невозможно изменить цвет границы Material-UI OutlinedInput