Question

与其在所有地方都这样做：

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

我只想写：

<Button>
  Description
</Button>

我可以使用主题替代来做到这一点吗？会是什么样子？

请注意，我正在尝试覆盖Material-UI属性和CSS样式。我想在全球范围内进行此操作（即不在任何地方使用withStyles()东西）。

还是只能通过定义某种新的AppButton组件来完成？

当前使用 material-ui 3.2.2

Answer 1

您可以使用主题的全局替代来执行此操作。文档在这里https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type

以这种方式进行操作仍将允许您按组件逐个覆盖变体。

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

Answer 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';

Answer 3

这是执行此操作的另一种方法，而无需定义新组件。

自定义组件与Material-UI的JSS带有Typescript的样式解决方案一起使用时可能会很尴尬。我发现在组合来自共享组件的样式类型和使用它的事物时，很难定义WithStyle类型。

除了定义组件外，还可以定义一组默认属性，然后将这些属性应用于传播运算符。

在应用中的某处定义并导出一组标准的共享道具：

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%"}} />

如何全局覆盖Material-UI组件的变体，颜色，样式等？

3 个答案: