javascript - 如何将背景 url 传递给：在 React 中的 OnVisible 之后

Question

我无法弄清楚如何将背景 url 传递给 :after 我从中获取的 className props。这是我相关的 Javascript 和 CSS 方法/类：

Card.js

const Card = props => (
    <OnVisible
        visibleClassName="card-appear"
        percent={50}
        className={classnames(
            "article-card p-8 pb-0",
            props.cardBackground,
            props.cardMobile,
            props.cardCollection
        )}
    >
        <ArticleHeader/>
        <ViewArticle/>
    </OnVisible>
);

样式.css

.article-card {
  flex: none;
  min-height: 400px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  font-family: gingerRegular, sans-serif;
  opacity: 0;
  transition: all 0.5s ease-out;
  cursor: pointer;
}
.article-card::after {
  content: "";
  background: url(https://source.unsplash.com/user/erondu/1600x900);
  opacity: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

正如您在上面看到的，我想将自定义背景 url 传递给 :after fromprops而不是在 css 中分配静态 url。

标签： javascriptcssreactjs