如何使用 props 更改 React 组件的颜色

Question

在下面的代码中，我在 React 的帮助下创建了一个按钮组件。由于 React 允许您创建可重用的组件，因此我希望能够创建一个可以包含不同文本并具有不同颜色的按钮。例如：

    import React from "react"
    import App from "../GlowButton/GlowButton"
    
    const App= () => {
        return (
            <div className="App"> 
                <GlowButton text="Darth vader" color="red"/>
                <GlowButton text="Yoda" color ="green"/>
                <GlowButton text="Obi Wan Kenobi" color="aqua"/>
            </div>
        )
    }

export default App

我已经让不同的文本部分开始工作，但我不确定如何（或是否可以）更改组件的颜色。

css文件是：

:root {
    --buttonColor: orange; 
}

.glowButton {
    margin: auto 0;
}

.myButton {
    border: none;
    padding: 0.4em 0.8em;
    text-align: center;
    background-color: transparent;
    color: var(--buttonColor);
    letter-spacing: 0.05rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    border: var(--buttonColor) 0.2em solid ;
    border-radius:  0.45em;
    transition: 0.5s;
    text-shadow: 1px 2px 5px;
    box-shadow: 0 0 0.1em var(--buttonColor), 0 0 0.3em var(--buttonColor);

    &:hover{
        color: black;
        background-color: var(--buttonColor);
        box-shadow: 0 0 0.5em var(--buttonColor), 0 0 0.7em var(--buttonColor), 0 0 1.10em var(--buttonColor);
    }
}

css 文件的样式和细节并不那么重要。关键是它基于 --buttonColor 变量创建了一个按钮。

JS/JSX 部分是：

import React from "react"

import "./GlowButton.scss"

// Properties are color and text 
const GlowButton = (props) => {
    return (
        <inline className="glowButton">
            <button className="myButton">{props.text}</button>
        </inline>
    )
}

export default GlowButton 

从网上看，我发现这部分代码可以选择和更改变量：

// change the button according to users props 
        const root = document.querySelector(':root')
        root.style.setProperty('--buttonColor', COLORCONST)

如果 COLORCONST 设置为单一颜色，则代码可以正常工作，但如果设置为 props.color 则无效，忽略颜色并显示css 文件中的默认橙色。

如果有人能解释我在 props.color 上做错了什么或为什么我不能使用它，那就太好了。

Answer 1

你可以做的是动态附加一个基于颜色的类，

import React from "react"

import "./GlowButton.scss"

// Properties are color and text 
const GlowButton = (props) => {
   return (
    <inline className="glowButton">
        <button className={`myButton ${props.color}`}>{props.text}</button>
    </inline>
   )
}

export default GlowButton 

然后将条件样式添加到您的样式表中，例如，

.myButton {

     //Common Styles Here

     &.red {
         //Distinct Styles Here
     }

     &.green {
         //Distinct Styles Here
     }

     &.aqua {
         //Distinct Styles Here
     }
}

Answer 2

你需要这样的东西：

const GlowButton = (props) => {
return (
    <inline className="glowButton">
        <button className="myButton" style={{color: props.color}}>{props.text}</button>
    </inline>
)}