Javascript 将值从React导入CSS的有效方法

我一直在寻找一些不同的选项，用于将值从React组件共享/导入到Sass/CSS文件。我有一个组件的

background

属性，该组件在接收到包含图像路径（来自API）的道具后被设置。这被设置为内联样式

我还想在悬停时向组件图像添加不透明层。使用常规CSS很容易做到这一点，但是当鼠标悬停在上方时，我不能简单地将

background

属性覆盖为渐变或颜色

我还需要获取组件内联样式中使用的图像路径，以便在图像上应用不透明度

组成部分：

render() {
    const styles = {
      background: `url('...somepath.jpeg') no-repeat center`
    }
    const item = { ...type, ...this.props.metadata };

    return (
      <section className="card"
               onClick={this.props.cb.bind(null, item)}
               style={styles}>
      </section>
    );
  }

基本上，我希望应用于悬停的样式如下所示：

线性渐变（rgba（20,20,20,5），rgba（20,20,20,5）），url（“…somepath.jpeg”）无重复中心

---

有没有一种有效的方法来完成这样的事情？我只能考虑将mouseover/mouseout事件侦听器添加到组件以添加“hover”内联样式。。。但我不想过多地使用内联。这是一个非常适合的用例。使用样式化组件，您可以将url作为道具传递，同时仍然能够使用CSS的全部功能

特定于您的案例的示例代码：

const Section = styled.section`
  &:hover {
    cursor: pointer;
    ${(props) => `background: url(${props.url}) no-repeat center` }
  }
`

render() {
  const item = { ...type, ...this.props.metadata };

  return (
    <Secion className="card"
             onClick={this.props.cb.bind(null, item)}
             url="...somepath.jpeg"
     />
  );
}

const Section=styled.Section`
&：悬停{
光标：指针；
${（props）=>`背景：url（${props.url}）无重复中心`}
}
`
render（）{
const item={…type，…this.props.metadata}；
返回(
);
}

为什么不能使用

css

呢？@guest271314图像的路径来自一个API调用，该调用的响应作为道具传递到此卡组件。我找不到将该路径导入CSS文件的方法。内联样式也不支持伪选择器。您可以在现有的

CSSStyleSheet

中设置

css

规则，或将

css

文本附加到

文档中的
元素。谢谢。这是解决这个问题的一个有趣的办法。但是，您是否担心这个库基本上更倾向于内联样式？我被告知在可能的情况下避免使用内联样式（尽管我不能肯定为什么会这样）。@Jose这个库几乎拥有通过SASS（伪类、媒体查询等）提供的所有功能。它绝对不同于普通的内联样式。这很酷。关于在React组件和样式表中维护样式的问题呢？这会不会在不同的文件中分散更多的样式？@Jose理论上，你应该将所有样式都保存在组件中，并且只有很少的全局样式。
const Section = styled.section`
  &:hover {
    cursor: pointer;
    ${(props) => `background: url(${props.url}) no-repeat center` }
  }
`

render() {
  const item = { ...type, ...this.props.metadata };

  return (
    <Secion className="card"
             onClick={this.props.cb.bind(null, item)}
             url="...somepath.jpeg"
     />
  );
}