自定义按钮颜色？

Question

我正在努力修改MUI next（v1）中的按钮颜色。

我该如何设置muitheme，使其行为与bootstrap相似，这样我就可以用“btn危险”表示红色，“btn成功”表示绿色？

我尝试了自定义class Name，但它不能正常工作（悬停颜色不会改变），而且似乎是重复的。我有什么选择？

Answer 1

Bagelfp的回答是错误的，还有一些其他的事情要考虑；

首先，在material-ui@nextv1的按钮组件中，“错误”不是受支持的颜色主题。颜色道具只接受“默认”、“继承”、“主要”和“次要”。

这是迄今为止我发现的最简单的方法。首先，选择两种最常见的主题颜色，并将它们放在应用程序的根目录下。

import React from 'react';
import { Component } from './Component.js'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const theme = createMuiTheme({
  palette: {
    primary: 'purple',
    secondary: 'green',
    error: 'red',
  },
});

export class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Component />
        ...
      </MuiThemeProvider>
    );
  }
}

然后在您的组件中，选择具有所需颜色的主题；

import React from 'react';
import Button from 'material-ui/Button';

export const Component = (props) => (
  <div>
    <Button variant="fab" color="primary">
      I am purple, click me!
    </Button>
  </div>
)

如果需要第三种和第四种颜色，可以导出组件。js使用一个新的调色板，就像你们在应用程序中做的一样。js。

<罢工> 这是我找到的唯一能让我保持黑暗悬停效果的解决方案（没有 官方覆盖示例保留功能悬停）。我真的希望我能找到一种方法，在调用按钮时简单地添加一个新的主题颜色，但现在这是最简单的方法。

编辑：我新的首选方法是使用样式组件和材料UI按钮库创建自定义按钮组件。我还将样式组件主题提供程序放在我的应用程序的根旁边。这让我可以轻松访问所有样式组件中的其他主题颜色，而无需导入和删除更多主题提供商。在我的CustomButton的情况下，我只是给它一个主题道具，它在样式（ButtonBase）中传递给css。有关更多信息，请参阅样式组件文档。

Answer 2

你可以试试这个

<Button
    style={{
        borderRadius: 35,
        backgroundColor: "#21b6ae",
        padding: "18px 36px",
        fontSize: "18px"
    }}
    variant="contained"
    >
    Submit
</Button>

Answer 3

我在这篇文章中使用了Brendan的答案提出了这个解决方案。希望它能帮助处于类似情况的人。

import React, { Component } from 'react'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
import Button from 'material-ui/Button'
import { red, blue } from 'material-ui/colors'

const redTheme = createMuiTheme({ palette: { primary: red } })
const blueTheme = createMuiTheme({ palette: { primary: blue } })

class Buttons extends Component {
  render = () => (
    <div className="ledger-actions-module">
      <MuiThemeProvider theme={redTheme}>
        <Button color="primary" variant="raised">
          Delete
        </Button>
      </MuiThemeProvider>
      <MuiThemeProvider theme={blueTheme}>
        <Button color="primary" variant="raised">
          Update
        </Button>
      </MuiThemeProvider>
    </div>
  )
}