How to make a customisable @material-ui Button ?

I want to show you the simplest way that you can integrate it into React.js class:

Installation

To install and save in your package.json dependencies, run:

// with npm
npm install @material-ui/styles
// with yarn
yarn add @material-ui/styles

React Class:

import React, {Component} from "react";
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
});
class AprinClass extends Component {
    render() {
        return (
            <MyButton>Styled Components</MyButton>
        )
    }
}
export default AprinClass;

More information can be found in:

@material-ui/styles - Material-UI

Button React component - Material-UI