Material-ui @next customize button colors?

Question

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

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

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?

Answer 1

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

Answer 2

There is a mistake with Bagelfp's answer, and some other things to consider;

First, 'error' is not a supported color theme in material-ui@next v1's Button component. Only 'default', 'inherit', 'primary' and 'secondary' are accepted by the color prop.

Here is the approach I have found to be the easiest so far. First, choose your two most common theme colors and place them at the root of your app.

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

Then in your Component, simply choose the theme with your desired color;

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

If you need a third and fourth color, you can simply export Component.js with a new pallete just like you did in App.js.

This is the only solution I have found that allows me to retain the darkened hover effect (none of the official override examples retain functioning hover). I really wish I could find a way to simply drop in a new theme color when calling Button, but for now this is the most simple way to do it.

EDIT: My new preferred method is to create a CustomButton component using styled-components and material-ui buttonbase. I also place the styled-components theme provider at the root of my app alongside my MuiThemeProvider. This gives me easy access to additional theme colors in all my styled-components without importing and dropping in more ThemeProviders. In the case of my CustomButton, I just give it a theme prop, which is passed right down to the css in styled(ButtonBase). See the styled-component docs for more info.

Answer 3

You can try this

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

Answer 4

You could create a theme with palettes defined for each of their 3 supported intentions (primary, secondary, error), and then use the color prop on <Button> to use those. In your example the btn-danger could be <Button color='error'>

EDIT: Brendan's answer is correct here that error is not supported for Button. According to the documentation Button only supports intentions that "make sense for this component.", so only primary and secondary would work here.

From their docs (trimmed down a little here):

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

function Palette() {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <Button color="primary">{'Primary'}</Button>
        <Button color="secondary">{'Secondary'}</Button>
      </div>
    </MuiThemeProvider>
  );
}

See Brendan's Answer for a more realistic example of creating themes for your components.