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

Question

我刚开始使用 JSS，但由于我们正在使用 Material UI 构建当前项目，我想我会尝试遵循他们的风格 API 使用 JSS我必须偶尔为应用程序构建的自定义组件。

在这种情况下，我可以让样式正常工作，但是，这个特定组件有一个动态的 backgroundUrl，它是从传入的道具中设置的，我想弄清楚我应该怎么做以某种方式将 class 与新的 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);

目前，它是一个样式标签，但是当我应用 class 时它被删除了，我该如何合并它们？

Answer 1

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

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

Merge styles using JSS in react component

javascript

reactjs

jss