Как глобально переопределить вариант, цвет, стиль и т. Д. Для компонентов Material-UI?

Question

Вместо того, чтобы делать это везде:

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

Я просто хочу написать:

<Button>
  Description
</Button>

Могу ли я использовать переопределения тем для этого и как это будет выглядеть?

Обратите внимание, что я пытаюсь переопределить свойства Material-UI и стили CSS.Я хочу сделать это глобально (то есть, не используя withStyles() вещи везде).

Или это можно сделать только путем определения какого-то нового AppButton компонента?

В настоящее время используется материал-интерфейс 3.2.2

Answer 1

Вот альтернативный способ сделать это, не определяя новый компонент.

Пользовательские компоненты могут быть неуклюжими при использовании с решением для моделирования JSS Material-UI с 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%"}} />

Answer 2

Вы можете сделать это с глобальными переопределениями для вашей темы.Документация находится здесь https://material -ui.com / customization / themes / # customizing-all-instance-of-a-component-type

Выполнение этого способа все еще позволит вам переопределитьвариант на основе компонентов, а также.

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

Answer 3

Для любого, кто найдет этот вопрос, если предположить, что для этого нет способа 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';