顺便说一句，我不确定有多少不同的组件具有“概述”变体。您将无法在单个 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主题的key，则需要使用如下样式表名称：MuiButton.

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

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

这是一个示例，显示了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);

相关答案：使用 React material-ui 更改 OutlinedInput 的大纲