スタイル設定されたコンポーネントのテーマイメージにsrcSetを追加

Question

私のウェブサイトには複数のテーマがあります。私はこのようなイメージに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 
`;