Каковы необходимые стили для палитры пользовательского интерфейса материала?

Question

У меня есть некоторые компоненты, которые используют MuiThemeProvider для настройки кнопки.Причина, вероятно, в том, что вместо имени пользовательской палитры вы можете иметь только "primary" или "secondary".Они выглядят так:

import React from "react";
import { badTheme } from "./Themes";
import {
    Button,
    MuiThemeProvider,
} from "@material-ui/core";

class Widget extends React.Component {
    render() {   
        return (
            <MuiThemeProvider theme={badTheme}>
                <Button color="primary">Click me</Button>
            </MuiThemeProvider>
        );
    }
}

export default Widget;

badTheme - это просто тема приложения с переопределением для main в палитре primary.

const badTheme= createMuiTheme({
    ...defaultTheme,
    palette: {
        ...defaultTheme.palette,
        primary: {
            main: "#2B368B",
        },
    },
});

Это будетприятно избавиться от этих маленьких тем, которые просто меняют кнопку, поэтому я хочу знать, какие все стили нужно реализовать при переключении на withStyles.

Я не хочу терять пульсациюстиль или любой другой стиль, о котором я не знаю, это происходит из настройки main в палитре.

Что требуется, чтобы заменить MuiThemeProvider на withStyles, или что-то еще, и иметьточно такие же стили на этой кнопке, которые высеваются на основе настройки палитры main?

Answer 1

Каждый вариант Button имеет свои собственные цветовые стили, которые определены в Button.js .

Чтобы создать новые цвета кнопок с помощью withStyles (вместо color prop), вам нужно будет скопировать стили, специфичные для цвета, для нужного варианта.

Начиная с material-ui@3.1.1, это стили для создания собственного цвета кнопки для каждого варианта.

Текстовые кнопки

Цветовые стили для кнопки по умолчаниювариант.На основе .textPrimary
Примечание. Эти стили также применяются к выделенному варианту.

textPink: {
  color: pink[500],
  "&:hover": {
    backgroundColor: fade(pink[500], theme.palette.action.hoverOpacity),
    // Reset on touch devices, it doesn't add specificity
    "@media (hover: none)": {
      backgroundColor: "transparent"
    }
  }
},

Кнопки с контуром

Цветстили для обрисованного в общих чертах варианта кнопки.Основано на .outlinedPrimary

outlinedPink: {
  border: `1px solid ${fade(pink[500], 0.5)}`,
  "&:hover": {
    border: `1px solid ${pink[500]}`
  },
  "&$disabled": {
    border: `1px solid ${theme.palette.action.disabled}`
  }
},

Содержащие кнопки

Цветовые стили для варианта удерживаемой / выпуклой кнопки.На основе .containedPrimary

containedPink: {
  color: theme.palette.getContrastText(pink[500]),
  backgroundColor: pink[500],
  "&:hover": {
    backgroundColor: pink[700],
    // Reset on touch devices, it doesn't add specificity
    "@media (hover: none)": {
      backgroundColor: pink[500]
    }
  }
}

Полный пример: