Глобальное обрисованное переопределение

Question

Каким образом я могу переопределить глобальную тему таким образом, чтобы этот стиль влиял на все компоненты, использующие вариант = 'контурный'. Также хотелось бы переопределить такие события, как фокус, зависание и т. Д.

 "@material-ui/core": "^3.9.2",

Answer 1

Случайно, я не уверен, сколько разных компонентов имеют "очерченный" вариант. Вы не сможете обратиться ко всем из них в одном правиле CSS, но каждый из них может быть рассмотрен отдельно в вашей теме.

В этом ответе я просто адрес OutlinedInput и изложил Button, Если у вас есть вопросы о переопределении стилей для других компонентов, создайте более конкретный вопрос, показывающий, что вы пробовали.

Документация по настройке всех экземпляров типа компонента находится здесь: https://material-ui.com/customization/themes/.

Следующий ресурс - просмотреть CSS-часть документации API для компонента, который вы хотите переопределить. Например, Button Документация находится здесь: https://material-ui.com/api/button/.

В нижней части документации CSS будет строка, подобная следующей в Button:

При использовании overrides ключ темы, вам нужно использовать следующее имя таблицы стилей: MuiButton,

Точно так же вот ссылка для OutlinedInput: https://material-ui.com/api/outlined-input/

Для некоторых настроек вам может понадобиться посмотреть, как стили по умолчанию определены в исходном коде, чтобы понять, как правильно их переопределить.

Вот пример, показывающий настройки OutlinedInput а также Button, Я также включил не обрисованные в общих чертах версии, чтобы показать, что на них не влияют настройки в теме.

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "green"
        },
        "&$focused $notchedOutline": {
          borderColor: "orange"
        },
        color: "purple"
      },
      notchedOutline: {}
    },
    MuiButton: {
      outlined: {
        borderColor: "purple",
        color: "red"
      },
      outlinedPrimary: {
        borderColor: "brown"
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField variant="outlined" defaultValue="My Text" />
      <br />
      <br />
      <TextField defaultValue="Not customized" />
      <br />
      <br />
      <Button variant="outlined">Outlined Button</Button>
      <br />
      <br />
      <Button color="primary" variant="outlined">
        Outlined Button - Primary
      </Button>
      <br />
      <br />
      <Button>
        Text Button - unaffected by customization to outlined button
      </Button>
    </MuiThemeProvider>
  );
}

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

Связанный ответ: Измените схему для OutlinedInput с React material-ui