全局轮廓覆盖 [英] Global outlined override

问题描述

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

In what way can I override global theme such that all components that are using variant = 'outlined' are impacted by that style. Also would like to override events like focus, hover, etc..

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

推荐答案

目前，我不确定有多少不同的组件具有概述"变体.您将无法在一个CSS规则中解决所有这些问题，但是可以在您的主题中分别处理它们.

Offhand, I'm not certain how many different components have an "outlined" variant. You won't be able to address all of them in a single CSS rule, but they can each be dealt with separately in your theme.

在这个答案中，我将仅提及OutlinedInput并概述Button.如果您对其他组件的样式有疑问，请创建一个更具体的问题，以显示您尝试过的方法.

In this answer I will just address OutlinedInput and outlined Button. If you have questions about overriding styles for other components, please create a more specific question showing what you tried.

此处是用于自定义组件类型的所有实例的文档: https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type .

The documentation for customizing all instances of a component type is here: https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type.

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

The next resource is to look at the CSS portion of the API documentation for the component you want to override. For instance the Button documentation is here: https://material-ui.com/api/button/#css.

在CSS文档的底部，将出现类似于Button中的一行:

At the bottom of the CSS documentation will be a line like the following in Button:

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

If using the overrides key of the theme, you need to use the following style sheet name: MuiButton.

类似地，这是OutlinedInput的链接: https://material -ui.com/api/outlined-input/#css

Similarly, here is the link for OutlinedInput: https://material-ui.com/api/outlined-input/#css

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

For some customizations, you may need to look at how the default styles are defined in the source code in order to understand how to override them properly.

这里是显示OutlinedInput和Button的自定义示例.我还包括了非概述版本，只是为了表明它们不受主题中的自定义设置的影响.

Here is an example showing customizations of OutlinedInput and Button. I have also included non-outlined versions just to show that they are unaffected by the customizations in the theme.

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更改OutlinedInput的轮廓material-ui

这篇关于全局轮廓覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！