Material UI Core for ReactJS

The information provided in the documentation is excellent. I have revised my response to meet the specific requirements of this query. Additionally, I've included two general solutions that may prove helpful to others encountering a similar issue.

Customized Solution:

This solution involves altering the background color of a button from classes.buttonDefaultRoot (a color specified by the question owner) to a gradient outlined by the individual behind this question.

To begin, create a variable within the state that will store the desired value. You can name it as you wish; in this case, let's refer to it as bgButton and set it to

this.props.classes.buttonDefaultRoot

:

state = {
  bgButton: this.props.classes.buttonDefaultRoot,
}

Next, define a function to manage the click event. Name it accordingly; here, we'll use handleClick:

handleClick = () => {
    const { classes } = this.props;
    this.setState({ bgButton: classes.parentRoot.auxClass });
};

Several actions occur within this function. Initially, props are destructured to create a new constant named classes holding the same value as this.props.classes. This contains a set of objects defining CSS styles for buttons, margins, etc, which can be accessed like any other prop to get the style value. For instance, classes.buttonDefaultRoot provides access to the button style.

Lastly, render the button. Within the render method, fetch bgButton from the state:

render() {
  const { bgButton } = this.state; 

Assign the className of the button to bgButton and add the onClick functionality following Material UI Core documentation:

<Button variant="contained" color="primary" className={classNames(bgButton)} onClick={this.handleClick}>Button Name</Button>

Combining all components yields:

import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "@material-ui/core/styles";

export default theme => ({ ... }) //excluded remaining code for brevity

class MyButton extends Component {
  state = {
    bgButton: null
  };
  handleClick = () => {
    const { classes } = this.props;
    this.setState({ bgButton: classes.parentRoot.auxClass });
  };
  render() {
    const { bgButton } = this.state;
    return (
      <div className={classes.container}>
        <Button
          variant="contained"
          color="primary"
          className={classNames(bgButton)}
          onClick={this.handleClick}
        >
          Custom CSS
        </Button>
      </div>
    );
  }
}

MyButton.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MyButton);

General Solution

This alternative suits those interested in utilizing predefined colors such as default, primary, secondary, inherit. The implementation eliminates the need for PropTypes or className imports, focusing solely on changing the color from default blue to predetermined pink.

state = {
  bgButton: "primary", 
} 
handleClick = () => {
  this.setState({ bgButton: "secondary" }); 
} 

render() {
  const { bgButton } = this.state; 
  return(
   ...
   <Button
     onClick = {this.handleClick} 
     variant = "contained"
     color={bgButton}
    > ..etc.

General Solution 2

For applying custom styles to the button, import PropTypes and classNames then follow the approach outlined in the tailored solution above. Syntax and class names may differ, but adhere closely to the documentation for easy comprehension and adjustments if required.

    import React, { Component } from "react";
    import Button from "@material-ui/core/Button";
    import PropTypes from "prop-types";
    import classNames from "classnames";
    import { withStyles } from "@material-ui/core/styles";
    import purple from "@material-ui/core/colors/purple";

    const styles = theme => ({
      container: {
        display: "flex",
        flexWrap: "wrap"
      },
      margin: {
        margin: theme.spacing.unit
      },
      cssRoot: {
        color: theme.palette.getContrastText(purple[500]),
        backgroundColor: purple[500],
        "&:hover": {
          backgroundColor: purple[700]
        }
      },
      bootstrapRoot: {
        boxShadow: "none",
        textTransform: "none",
        fontSize: 16,
        padding: "6px 12px",
        border: "1px solid",
        backgroundColor: "#007bff",
        borderColor: "#007bff",
        fontFamily: [
          "-apple-system",
          "BlinkMacSystemFont",
          '"Segoe UI"',
          "Roboto",
          '"Helvetica Neue"',
          "Arial",
          "sans-serif",
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"'
        ].join(","),
        "&:hover": {
          backgroundColor: "#0069d9",
          borderColor: "#0062cc"
        },
        "&:active": {
          boxShadow: "none",
          backgroundColor: "#0062cc",
          borderColor: "#005cbf"
        },
        "&:focus": {
          boxShadow: "0 0 0 0.2rem rgba(0,123,255,.5)"
        }
      }
    });

    class MyButton extends Component {
      state = {
        bgButton: null
      };
      handleClick = () => {
        const { classes } = this.props;
        this.setState({ bgButton: classes.cssRoot });
      };
      render() {
        const { classes } = this.props; 
        const { bgButton } = this.state;
        return (
          <div className={classes.container}>
            <Button
              variant="contained"
              color="primary"
              className={classNames(bgButton)}
              onClick={this.handleClick}
            >
              Custom CSS
            </Button>
          </div>
        );
      }
    }
MyButton.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MyButton);

Constructors and method binding are no longer necessary. This guideline should simplify the process.

Trust this information proves useful.