How do you change the color of a React component using props

Question

In the code below I've created a button component with the help of React. Since React allows you to create reusable components, I wanted to be able to create a button that could contain different text and be a different color. For example:

    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

I've gotten the different text part to work, but I am not sure how (or if it's possible) to change the color of the component.

The css file is:

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

The styles and specifics of the css file don't really matter all that much. The key takeaway is that it creates a button based on the --buttonColor variable.

The JS/JSX portion is:

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 

From looking online I've found this section of code that can select and change a variable:

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

If COLORCONST is set to a single color then the code works fine, but if it is set to props.color it is not valid, ignoring the color and displaying the default orange in the css file.

It would be great if someone could explain what I'm doing wrong with props.color or why I can't use it.

Answer 1

What you can do is append a color based class dynamically like,

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 

And then add conditional styling to your stylesheet like,

.myButton {

     //Common Styles Here

     &.red {
         //Distinct Styles Here
     }

     &.green {
         //Distinct Styles Here
     }

     &.aqua {
         //Distinct Styles Here
     }
}