Material-ui @next自定义按钮颜色? [英] Material-ui @next customize button colors?

问题描述

我正在努力修改Material-UI @ next(v1)中的按钮颜色.

I am struggling to modify button colors in Material-UI@next (v1).

我该如何设置muitheme使其表现出与Bootstrap相似的表现，所以我可以只将"btn-danger"用于红色，将"btn-success"用于绿色...?

How would I set muitheme to behave similarity to bootstrap, so I could just use "btn-danger" for red, "btn-success" for green... ?

我尝试使用自定义className，但是它不能正常工作(悬停颜色不会改变)，并且似乎是重复的.我有什么选择?

I tried with custom className but it doesn't work properly (hover color does't change) and it seems repetitive. What options do I have?

推荐答案

我在此线程中使用Brendans答案提出了此解决方案.希望它能帮助处于类似情况的人.

I came up with this solution using Brendans answer in this thread. Hopefully it'll help someone in a similar situation.

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

这篇关于Material-ui @next自定义按钮颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！