reactjs - 全局概述覆盖

顺便说一句，我不确定有多少不同的组件具有“概述”变体。您无法在单个 CSS 规则中解决所有这些问题，但可以在您的主题中分别处理它们。

在这个答案中，我将只解决OutlinedInput和概述Button。如果您对覆盖其他组件的样式有疑问，请创建一个更具体的问题来显示您尝试过的内容。

自定义组件类型的所有实例的文档在这里：https ://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type 。

下一个资源是查看要覆盖的组件的 API 文档的 CSS 部分。例如Button文档在这里：https ://material-ui.com/api/button/#css 。

在 CSS 文档的底部将有如下一行Button：

如果使用overrides主题的键，则需要使用以下样式表名称：MuiButton.

同样，这里是链接OutlinedInput：https ://material-ui.com/api/outlined-input/#css

对于某些自定义，您可能需要查看源代码中的默认样式是如何定义的，以便了解如何正确覆盖它们。

这是一个 v3/v4 示例（下方的 v5 示例）显示了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);

这是 v5 的类似示例：

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import { createTheme, ThemeProvider } from "@mui/material/styles";
const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "green"
          },
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "blue"
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "orange"
          },
          color: "purple"
        }
      }
    },
    MuiButton: {
      styleOverrides: {
        outlined: {
          borderColor: "purple",
          color: "red"
        },
        outlinedPrimary: {
          borderColor: "brown"
        }
      }
    }
  }
});
function App() {
  return (
    <ThemeProvider theme={theme}>
      <TextField variant="outlined" defaultValue="My Text" />
      <br />
      <br />
      <TextField variant="standard" defaultValue="Not customized" />
      <br />
      <br />
      <Button variant="outlined" color="inherit">
        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>
    </ThemeProvider>
  );
}

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

reactjs - 全局概述覆盖

问题描述

解决方案

推荐阅读