如何在React应用程序的CSS的许多属性中使用JS变量

I've created a component for a hint bubble. Here my the HintBubble component:

import React from 'react';

const HintBubble = ({ text, pointerDirection = "top", color = "#f7b049" }) => {
    return (
        <section id="hint-bubble" className={`hint-bubble-${pointerDirection}`}>
            {text}
        </section>
    );
};

export default HintBubble;

这些是手写笔编写的组件的不同样式：

// Top side
.hint-bubble-top {
    position: relative;
    background: #800040;
    border-radius: .4em;
}

.hint-bubble-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-bottom-color: #800040;
    border-top: 0;
    border-left: 0;
    margin-left: -21px;
    margin-top: -42px;
}

// Right Side
.hint-bubble-right {
    position: relative;
    background: #800040;
    border-radius: .4em;
}

.hint-bubble-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-left-color: #800040;
    border-right: 0;
    border-bottom: 0;
    margin-top: -21px;
    margin-right: -42px;
}

// Bottom side
.hint-bubble-bottom {
    position: relative;
    background: #800040;
    border-radius: .4em;
}

.hint-bubble-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-top-color: #800040;
    border-bottom: 0;
    border-left: 0;
    margin-left: -21px;
    margin-bottom: -42px;
}

// Left Side
.hint-bubble-left {
    position: relative;
    background: #800040;
    border-radius: .4em;
}

.hint-bubble-left::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-right-color: #800040;
    border-left: 0;
    border-bottom: 0;
    margin-top: -21px;
    margin-left: -42px;
}

For the creation of all states that are displayed in this, I have to set the background-color, border-bottom-color, border-left-color, ... properties of different classes.

I know that I can change the background-color property via document.queryselector('.hint-bubble-top').style.backgroundColor, but I want to give color from props and replace it in all background-color, border-bottom-color, border-left-color,... properties in my Stylus file.