材质UI调色板需要哪些样式？

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道具）来创建新的按钮颜色，您需要为所需的变体复制特定于颜色的样式。

从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]
    }
  }
}

完整示例：