在react组件中使用JSS合并样式

我不熟悉使用JSS,但由于我们正在使用Material UI构建当前项目,我想我会尝试使用JSS和我偶尔为应用程序构建的自定义组件来遵循他们的风格API。

在这种情况下,我可以让样式正常工作,但是,这个特定组件有一个动态 backgroundUrl 这是从传入的道具中设置的,我正在试图弄清楚我应该如何以某种方式将即将加入的类与新的 背景URL 需要动态设置的样式。。。

样式

export default {
  root: {
    backgroundSize: 'cover',
    padding: '25px 20px',
    boxSizing: 'border-box',
    backgroundPosition: '50% 0',
    backgroundColor: 'rgba(40,70,94,.7)',
    backgroundBlendMode: 'multiply'
  }
};

组件

import React from 'react';
import styles from './EventTop.styles';
import { withStyles } from 'material-ui/styles';

const EventTop = ({ event, classes }) => (
  <aside className={classes.root} style={{ backgroundUrl: `url(${event.event_logo})` }}>
    <div className="wrapper">
      <div className="event-info">
        <span className="event-time">
          7:00 PM
        </span>
        <span className="event-date">
          27 Jun 2020
        </span>
        <span className="event-end-time">
          Ends at 10:00 PM
        </span>
        <span className="event-title">
          Bidr Gala
        </span>
        <span className="event-attire">
          Cocktail Attire
        </span>
      </div>
    </div>
  </aside>
);

export default withStyles(styles)(EventTop);

目前,它是一个样式标记,但在应用该类时会被剥离,如何合并这些标记?