☰

タグに依存しないスタイルのコンポーネントを実現するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript css reactjs styled-components
タグに依存しないスタイルのコンポーネントを実現するにはどうすればいいですか? 質問する

ボタンが欲しいけど、その表示部分だけが欲しい場合は、次のようにします。

import styled from 'styled-components'

const Button = styled.button`
  color: red;
  text-align: center;
`

タグをレンダリングすることを強制されますbuttonが、意味的にアンカーが必要な場合はどうでしょうか?

ベストアンサー1

使用「as」多態的プロパティでv4

ドキュメントの例からコピー/ペーストします:

const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

おすすめ記事