Css 在单击期间更改样式

我有一个项目，我想改变按钮的颜色在点击。我知道这是一个Ripple API，但使用它是非常令人费解的。有人能告诉我怎么做吗

我尝试创建两个元素-父元素和子元素-并在单击时将子元素的背景更改为透明。不幸的是，我也有“类”对象负责更改类，如果按钮是活动的，它只是不工作。 我的代码如下：

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import styles from './MydButton.style';

class MyButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    };
  }

  handleClick = () => {
    this.setState({ isClicked: !this.state.isClicked });
  }

  render() {
    const {
      classes,
      children,
      color,
      disabled,
      className,
      onClick,
      type,
      border,
      ...props
    } = this.props;

    const myClass = this.state.isClicked ? 'auxClass' : 'buttonDefaultRoot';


    return (
      <div className={classes.parentRoot} >
        <Button
          classes={{
            root: disabled
            ? classes.buttonDisabledRoot
            : classes.buttonRoot,
            label: disabled 
            ? classes.buttonLabelDisabled 
            : classes.buttonLabel,
          }}
          {...props}
          onClick={this.handleClick}
          className={myClass}
          disabled={disabled}
          type={type === undefined ? 'button' : type}
        >
          {children}
        </Button>
      </div>
    )
  }
};

MyButton.propTypes = {
  children: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
  classes: PropTypes.object.isRequired,
};

MyButton.defaultProps = {
  disabled: false,
};

export default withStyles(styles)(MyButton);

ReactJS的材质UI核心 文档非常好。我已经更新了我的答案，以适应这个问题的具体需要。我还为偶然发现这个问题的人提供了两个通用解决方案

定制解决方案：

将按钮的背景色从

classes.buttonDefaultRoot

（问题所有者定义的颜色）更改为此问题所有者定义的渐变色

第一步，将变量存储在state中。你想怎么叫都行，但我要按按钮。将其设置为

this.props.classes.buttonDefaultRoot

，如下所示：

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

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

接下来，您要定义处理单击的函数。再说一遍，随你怎么说。我称之为

handleClick

handleClick = () => {
    const { classes } = this.props; //this grabs your css style theme
    this.setState({ bgButton: classes.parentRoot.auxClass }); //accessing styles
  };

这里发生了几件事。首先，我在分解道具。因此，我正在创建一个名为

classes

的新

const

变量，该变量的值与

this.props.classes

的值相同。

classes

包含一组对象，用于定义按钮、页边距等的

css

样式。您可以访问这些样式，就像您试图获取obj中的道具值一样

在这种情况下，您可以通过执行，

classes.buttonDefaultRoot

访问按钮样式。这会处理好你的点击功能

最后一步：渲染按钮。在渲染方法中，您希望从以下状态获取

bgputton

：

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

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

然后，您希望将按钮的

className

分配给

bgButton

，并添加如下

onClick

功能（如下所示为Material UI核心文档）：

按钮名称

把所有这些放在一起，你会得到：

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 => ({ ... }) //not going to copy all of this

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);

import React，{Component}来自“React”；
从“@物料界面/核心/按钮”导入按钮；
从“道具类型”导入道具类型；
从“类名”中导入类名；
从“@material ui/core/styles”导入{withStyles}”；
导出默认主题=>（{…}）//不复制所有这些内容
类MyButton扩展组件{
状态={
bgputton:空
};
handleClick=（）=>{
const{classes}=this.props；
this.setState（{bgButton:classes.parentRoot.auxClass}）；
};
render（）{
const{bgButton}=this.state；
返回(
自定义CSS
);
}
}
MyButton.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（MyButton）；

通用解决方案

此解决方案适用于希望使用预定义颜色（即默认、主、次、继承）的用户。此实现不需要PropTypes或className导入。这会将颜色从预定义的蓝色更改为预定义的粉红色。就这样

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

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

状态={
bg按钮：“主”，
} 
handleClick=（）=>{
this.setState（{bgButton:“secondary”}）；
} 
render（）{
const{bgButton}=this.state；
返回(
...
等

通用解决方案2

为了使自定义样式适应按钮，您必须导入PropTypes和classNames，并采用与上述定制解决方案类似的方法。这里唯一的区别是我的语法和类名。我正在密切关注这里的文档，以便您可以轻松地跟随并在必要时重新调整

    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; //this gives you access to all styles defined above, so in your className prop for your HTML tags you can put classes.container, classes.margin, classes.cssRoot, or classes.bootstrapRoot in this example. 
        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);

import React，{Component}来自“React”；
从“@物料界面/核心/按钮”导入按钮；
从“道具类型”导入道具类型；
从“类名”中导入类名；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/colors/purple”导入紫色；
常量样式=主题=>({
容器：{
显示：“flex”，
柔性包装：“包装”
},
保证金：{
页边空白：theme.space.unit
},
cssRoot：{
颜色：theme.palette.GetContractText（紫色[500]），颜色为，
背景颜色：紫色[500]，
“&：悬停”：{
背景颜色：紫色[700]
}
},
bootstrapRoot：{
boxShadow：“无”，
textTransform:“无”，
尺寸：16，
填充：“6px 12px”，
边框：“1px实心”，
背景颜色：“007bff”，
边框颜色：“007bff”，
fontFamily：[
“-苹果系统”，
“系统字体”，
"Segoe UI",，
“机器人”，
"Helvetica Neue",，
“Arial”，
“无衬线”，
“苹果色表情符号”，
“Segoe UI表情符号”，
““Segoe用户界面符号”
].加入（“，”），
“&：悬停”：{
背景色：“0069d9”，
边框颜色：“0062cc”
},
“&：活动”：{
boxShadow：“无”，
背景色：“0062cc”，
边框颜色：“005cbf”
},
“&：焦点”：{
盒影：“0.2rem rgba（0123255，.5）”
}
}
});
类MyButton扩展组件{
状态={
bgputton:空
};
handleClick=（）=>{
const{classes}=this.props；
this.setState（{bgButton:classes.cssRoot}）；
};
render（）{
const{classes}=this.props；//这使您可以访问上面定义的所有样式，因此在HTML标记的className prop中，您可以在本例中放置classes.container、classes.margin、classes.cssRoot或classes.bootstrapRoot。
const{bgButton}=this.state；
返回(