reactjs - 将 srcSet 添加到样式化组件主题图像

Question

我的网站有多个主题。我正在尝试将 a 添加srcSet到这样的图像中：

export const Header = styled.img.attrs({
  src: props => props.theme.images.Header1x,
  srcSet: `${props => props.theme.images.Header1x} 1x, ${props => props.theme.images.Header2x} 2x, ${props => props.theme.images.Header3x} 3x`,
})`
  height: 42px
`;

该src属性是正确的，但srcSet不是：

<img src="/images/header.jpg" srcset="function (props) {
    return props.theme.images.Header1x;
  } 1x, function (props) {
    return props.theme.images.Header2x;
  } 2x, function (props) {
    return props.theme.images.Header3x;
  } 3x" class="sc-VJcYb epAqoN">

styled-components主题功能很棒，我想用它来组织我的所有主题，但我想不出一种方法来正确地srcSet用它构建一个。任何人都有任何策略，还是我需要完全转向另一个方向？

Answer 1

srcSet 属性的值是一个模板字符串，但应该是一个返回字符串的函数。

export const Header = styled.img.attrs({
  src: props => props.theme.images.Header1x,
  srcSet: props => `${props.theme.images.Header1x} 1x, ${props.theme.images.Header2x} 2x, ${props.theme.images.Header3x} 3x`,
})`
  height: 42px
`;