color button material ui theme code example
Example 1: material ui change button to custom color
/*
style={{backgroundColor: '#12824C', color: '#FFFFFF'}}
backgroundColor changes the button color
color changes the text color
These examples use Hex to define the color (Green button with white text)
*/
// Example
import React from 'react';
import Button from '@material-ui/core/Button';
const GreenButton = () => {
return(
<Button
style={{backgroundColor: '#12824C', color: '#FFFFFF'}}
>Green</Button>
)
}
export default GreenButton;
Example 2: material ui change theme
import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
palette: {
primary: {
// light: will be calculated from palette.primary.main,
main: '#ff4400',
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: '#0066ff',
main: '#0044ff',
// dark: will be calculated from palette.secondary.main,
contrastText: '#ffcc00',
},
// error: will use the default color
},
});