Material ui 如何全局覆盖材质UI组件的变体、颜色、样式等？

而不是到处这样做：

<Button variant="contained" color="primary" 
  style={{textTransform: "none"}}    
>
  Description
</Button>

我只想写：

<Button>
  Description
</Button>

我可以使用主题覆盖来做这件事吗？那会是什么样子

注意，我试图覆盖材质UI属性和CSS样式。我想在全球范围内做到这一点，即不在任何地方使用Wistyles的东西

或者，这只能通过定义某种新的AppButton组件来实现吗

---

目前正在使用material ui 3.2.2

来回答任何发现此问题的人，假设没有material ui方法来解决此问题，下面是我的自定义按钮组件

import * as React from "react";
import {Button} from "@material-ui/core";
import {ButtonProps} from "@material-ui/core/Button";


export class AppButton extends React.Component<ButtonProps, {}>{
  render(){
    let {style, ...props} = this.props;
    return <Button {...props} variant="contained" color="primary"
      style={{...style, textTransform: "none"}}
    >
      {this.props.children}
    </Button>
  }
}
AppButton.muiName = 'Button';

---

这里有另一种方法可以做到这一点，而无需定义新组件

使用Typescript与Material UI的样式化解决方案一起使用时，自定义组件可能会比较笨拙。我发现，当从共享组件和使用它的东西组合样式类型时，很难定义样式类型

不必定义组件，可以定义默认属性集，然后使用“扩展”操作符应用这些属性集

在应用程序中的某个位置定义并导出一组标准的共享道具：

import {LinearProgressProps} from "@material-ui/core/LinearProgress";

export const linearProps: LinearProgressProps = {
  variant:"indeterminate",
  color:"primary",
  style:{height:"2px"},
};

<LinearProgress {...linearProps} />

然后在应用程序中使用这些道具：

import {LinearProgressProps} from "@material-ui/core/LinearProgress";

export const linearProps: LinearProgressProps = {
  variant:"indeterminate",
  color:"primary",
  style:{height:"2px"},
};

<LinearProgress {...linearProps} />

这样就可以很容易地使用自定义特性、自定义内联样式或JSS生成的样式来覆盖：

<LinearProgress {...linearProps} className={classes.customProgress}
  color="secondary" style={{...linearProps.style, width: "100%"}} />

---

您可以使用主题的全局覆盖来实现这一点。 文件在这里

这样做仍然允许您在每个组件的基础上覆盖变量

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiButton: {
      // The properties to apply
      variant: 'contained'
    },
  },
});