Reactjs 在react组件中传递样式作为道具

我在react中创建了一个事件框组件。我想要的是，无论何时调用它，我都将颜色值作为道具传递，这些道具稍后用于设置其边框。目前，我设置了两个硬编码的类名，并将它们作为道具与组件一起传递。因为我无法在样式表中添加所有的颜色类名，所以还有其他方法吗

组件代码

import React from 'react';

class EventBox extends React.Component{
    constructor(props)
    {
        super(props);
        this.state={

        }
    }
    render()
    {
        const style={
            marginBottom:'0px'
        }
        const list={
            display:'inline-flex',
            width:'100%',
            marginBottom:'10px'
        }
        const listItem={
            flex:'1',
            display:'flex'
        }
        return(
            <div className={this.props.class}>
                <ul className="list list-inline" style={list}>
                    <li className="list-inline-item color-golden" style={listItem}>1 March 2020</li>
                    <li className="list-inline-item color-red flex flex-end" style={listItem}>200 People Interested</li>
                </ul>
                <h3 className="sub-heading roboto">Title</h3>
                <p className="paragraph roboto" style={style}>Saket, New Delhi</p>
                <p className="paragraph roboto" style={style}>Time: 05:00 P.M - 06:30 P.M</p>

            </div>
        )
    }
}
export default EventBox;

---

您可以将动态样式作为对象传递给组件

对于基于类的组件：

从“React”导入React；
类EventBox扩展了React.Component{
render（）{
返回(
)
}
}
导出默认事件框；

对于功能组件：

从“React”导入React；
const EventBox=（{style}）=>{
返回(
)
}
导出默认事件框；

用法

这个使用样式为

的JS对象模式的正式名称是什么？这是JS中的CSS吗？@CodeFinity它只是作为JS对象传递内联样式

 <EventBox class="col-md-12 event-box-container red-border" />
 <EventBox class="col-md-12 event-box-container green-border" />


.event-box-container.red-border{
    border-top: 8px solid red;
}
.event-box-container.green-border{
    border-top: 8px solid green;
}