Pass style as props in react component

I created a event-box component in react. What I want is whenever is it called, I passed color values as props which later get used to set its border. Currently, I set two hardcoded class names and passed them as props with the component. Is there any other way to do so as I won't able to add all the color class names in my stylesheet.

Component code

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;

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

CSS

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