Javascript 如何使用道具更改React组件的颜色

在下面的代码中，我在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文件的样式和细节实际上并不重要。关键在于它基于--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 

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

---

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

你需要这样的东西：

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

const GlowButton=（道具）=>{
返回(
{props.text}
)}

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

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 

---

内联样式是最合适的解决方案吗？在我看来，如果有更多的样式，那么使用内联将很快变得杂乱无章。我认为第二种方法是将颜色名称添加到类名中，并在css中为每个类编写另一种颜色。我不知道第三种方法如果有三种以上的颜色怎么办？如果我希望用户能够使用任何rgba（w、x、y、z）颜色，该怎么办。这超过一百万个条件。任何主题或react库都有一个特定范围的调色板。只要选择你想要的，如果你想要百万色的条件，你可能必须使用内联样式或一些npm库。

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

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
     }
}