将 styled-components 与来自 React 组件的 props 一起使用

Question

我在我的 React js 项目中使用样式化组件。在构建我的样式组件 img 时，我希望背景依赖于组件获得的道具。如果我正在构建一个功能组件，我只使用：

  const FramedImage = styled.img`
  background-size: cover;
  background: URL(${props.imageUrl});
  background-position: center center;
  background-repeat: no-repeat;`;

在组件内部，它可以工作。但是如何使用 class 组件实现相同的效果？因为我不能在 class 本身内部声明一个 const var，而在它外面，没有 this.props

谢谢！

Answer 1

当定义在组件范围之外时，您需要传入一个函数来访问 props。所以在你的情况下：

const FramedImage = styled.img`
  background-size: cover;
  background: URL(${props => props.imageUrl}); //use a function here instead
  background-position: center center;
  background-repeat: no-repeat;
`;

当 styled-components 遇到 CSS 模板中的函数时，它将使用分配给组件的 props 调用它。

请记住，虽然这是指分配给 FramedImage 组件的 props，所以如果您想传入 props从它的父组件开始，你需要这样传播它们：

class Parent extends React.Component {
  render() {
    return <FramedImage {...this.props} />
  }
}

将 styled-components 与来自 React 组件的 props 一起使用

Using styled-components with props from React component

reactjs

styled-components