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

Question

我一直在研究将值从 React 组件共享/导入到 Sass/CSS 文件的方法的一些不同选项。在接收到包含图像路径（来自 API）的道具后，我设置了组件的 background 属性。这被设置为内联样式。

我还想为组件图像悬停时添加一个不透明层。这可以通过常规 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>
    );
  }

样式：

.card:hover {
        cursor: pointer;
        background: linear-gradient(rgba(20,20,20, .5), rgba(20,20,20, .5)) !important;
        // without the path to build the url, this just deletes the image
 }

基本上，我希望在悬停时应用的样式如下所示： linear-gradient(rgba(20,20,20, .5), rgba(20,20,20, .5)), url('...somepath.jpeg') no-repeat center

有没有一种有效的方法来完成这样的事情？我只能考虑向组件添加 mouseover/mouseout 事件侦听器以添加“悬停”内联样式......但我想避免过多地使用内联。

Answer 1

这是styled-components 的完美用例。使用样式化组件，您可以将 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"
     />
  );
}