Question

我已经使用react在我的应用程序中创建了一个自定义Button组件。截至目前，我可以在其中将颜色动态更改为在其color属性中指定的颜色，但是现在我希望可以选择更改按钮的大小（即'small '， '大'）。我还是CSS的初学者，所以我不太确定该怎么做。

我的Button.css文件

.ButtonUI {
    border-radius: 4px;
    border: none;
    padding: 10px 24px;
    margin-right: 20px;
    margin-left: 20px;
}

.G-green {
    color: white;
    background-color: #0F9D58;
}

.small {
    border-radius: 4px;
    border: none;
    padding: 6px 12px;
}

.ButtonUI.G-green:hover{
    cursor: pointer;
    background-color: #0d8c4f;
}

.G-blue {
    color: white;
    background-color: #4285F4;
}

.ButtonUI.G-blue:hover{
    cursor: pointer;
    background-color: #336ac4;
}

.G-red {
    color: white;
    background-color: #DB4437;
}

.ButtonUI.G-red:hover{
    cursor: pointer;
    background-color: #b0362c;
}

.G-yellow {
    color: white;
    background-color: #F4B400;
}

.ButtonUI.G-yellow:hover{
    cursor: pointer;
    background-color: #d19b02;
}

.ata-teal{
    color: white;
    background-color: #04837B;
}

.ButtonUI.ata-teal:hover{
    cursor: pointer;
    background-color: #005e58;
}

.ata-orange{
    color: white;
    background-color: #ffa600;
}

.ButtonUI.ata-orange:hover{
    cursor: pointer;
    background-color: #db8f00;
}

我的Button.js文件

import React from 'react'
import '../../StyleSheets/Button.css'

export default class Button extends React.Component{
    constructor(props){
        super(props);

        this.state = {

        }
    }

    render(){
        return(
            <div id="button">
                <button className={"ButtonUI " + this.props.color + this.props.size} onClick={this.props.click} id={this.props.name}>{this.props.name}</button>
            </div>
        )
    }
}

我尝试这样调用组件：<Button color="G-green" size="small" name="Click Me"></Button>，但这会打断CSS，并且按钮显示为空白。

如果有人知道解决此问题的好方法，我将不胜感激。谢谢！

Answer 1

<button className={`ButtonUI ${this.props.color} ${this.props.size}`} onClick={this.props.click} id={this.props.name}>{this.props.name}</button>

或

<button className={['ButtonUI', this.props.color, this.props.size].join(' ')} onClick={this.props.click} id={this.props.name}>{this.props.name}</button>

或者如果您想安装classnames软件包，这对于条件类来说真的很好：

import classNames from 'classnames'

<button className={classNames('ButtonUI', this.props.color, this.props.size)} onClick={this.props.click} id={this.props.name}>{this.props.name}</button>

Answer 2

嘿，我刚刚想出了这个，希望对您有所帮助：

constructor(){
         super();
         this.state = {
              black: true
         }
    }
    changeColor(){
        this.setState({black: !this.state.black})
    }
    render(){
        let btn_class = this.state.black ? "blackButton" : "whiteButton";

        return (
             <div>
                 <button className={btn_class}
                         onClick={this.changeColor.bind(this)}>
                           Button
                  </button>
             </div>
        )
    }

这是CSS：

button{
  width: 80px;
  height: 40px;
  margin: 15px;
}
.blackButton{
  background-color: black;
  color: white;
}

.whiteButton{
  background-color: white;
  color: black;
  width: 120px;
  height: 140px;
  margin: 15px;
}

如何在React中动态更改按钮的大小和颜色

2 个答案: