Material 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 只是应用主题，在primary 调色板中覆盖了main。

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

完整示例：