10

スタイル付きコンポーネントを使用し、次のようなタグ付きテンプレート リテラル構文を使用してコンポーネントを生成しています。

const Button = styled.button`
  background-color: papayawhip;
  border-radius: 3px;
  color: palevioletred;
`

あるケースでは、ブレークポイントに基づいてメディア クエリを生成し、含まれる css のタグ付きテンプレート リテラルを渡す関数を呼び出す必要があります

例えば:

media(12)`
   background-color: papayawhip;
`

メディア関数は次のようになります。

const media = mapValues(width => ({ css: (...args) => css`
  @media (min-width: ${width}rem) {
    ${css(...args)}
  }
`}));

値とタグ付きテンプレート リテラルの両方を渡すことは可能ですか、それとも間違った方法で行っていますか?

4

1 に答える 1