0

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

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

4

1 回答 1

2

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

于 2018-03-05T15:26:54.753 回答