Question

我是使用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);

目前，它是一个样式标记，但在我应用该类时会被删除，我该如何合并这些？

Answer 1

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

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

1 个答案: