material-ui button colors 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 button

// Check out my online sandbox to see more button props
// https://codesandbox.io/s/material-ui-button-e809z?file=/src/App.js

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

export default function MaterialuiButton() {
  
  function handleButtonPress() {
    console.log("button pressed");
  }
  
  return (
    <Button
    variant='contained'
    color='primary'
    onClick={() => {
        handleButtonPress();
    }}
    >
      PRESS ME
    </Button>
  );
}