在 React 组件中使用 JSS 合并样式答案

【问题标题】：Merge styles using JSS in react component在 React 组件中使用 JSS 合并样式
【发布时间】：2018-03-05 15:15:13
【问题描述】：

我是使用 JSS 的新手，但由于我们正在使用 Material UI 构建我们当前的项目，我想我会尝试使用 JSS 和我必须偶尔为应用构建的自定义组件来遵循他们的样式 API。

在这种情况下，我可以让样式正常工作，但是，这个特定的组件有一个动态的backgroundUrl，它是从传入的道具中设置的，我试图弄清楚我应该如何以某种方式合并带有新的backgroundUrl 样式的类我需要动态设置...

样式

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

目前，它是一个样式标签，但是当我应用该类时它会被剥离，我该如何合并它们？

【问题讨论】：

标签： javascript reactjs jss

【解决方案1】：

如果您使用内联样式，则不需要合并类。它应该已经工作了。你的问题是 backgroundUrl 不是一个有效的 css 属性，它是 backgroundImage。

【讨论】：