React with Material-UI: Changing component colors

Question

I have a question about the buttons (I think it will heal the other components too). There is the property color, by default I can use primaryor secondary, Both come along with the material. But what if I want a green background button, how would I do that? There is the possibility to create a new property color calling for thirdfor example and paint the background of the green button?

Answer 1

Try:

First, take a look at this example: https://stackblitz.com/edit/react-bd92xq

import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

// Crie seu próprio tema:
const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
    third: {
      light: '#5fba7d',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
{/*Lembre de importar o botão*/}
      <Button
     variant="raised"
     color="third" {/*Ou: color={theme.palette.third}*/}
   </Button>
    </MuiThemeProvider>
  );
}

render(<App />, document.querySelector('#app'));

Then you can read some materials:

• Customization-color/
  
• Change secondary and primary colors in the user interface(en)
  
• How to add multiple colors from the Material UI palette (en)