Question

我可以以什么方式覆盖全局主题，以使使用variant ='outlined'的所有组件都受到该样式的影响。还希望覆盖诸如焦点，悬停等事件。

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

Answer 1

目前，我不确定有多少不同的组件具有“概述”变体。您将无法在一个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

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

这里是显示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);

相关答案：Change outline for OutlinedInput with React material-ui

全局轮廓覆盖

1 个答案: