StyledComponentの継承でタグ変更

Question

前提・実現したいこと

ReactのstyledComponentを用いてSPAの開発をしています。
あらかじめ定義していたstyledComponentを継承してボタンを作っているのですが、そのスタイル継承しつつタグを設定することはできないのでしょうか？
例えば、buttonタグで作ったもののスタイルを継承しつつ、それをaタグとして使えないでしょうか？

ソースコード

export const Button = styled.button`
  font-size: 13px;
  border-radius: 20px;
  height: 30px;
  padding:0;
  cursor: pointer;
  transition: all .2s ease;
  font-weight: bold;
  min-width: ${props => props.width ? props.width : '100px'};
  &:hover {
  	opacity:0.7;
  }
`;
------------------

const TwitterBtn = Button.extend`←ここでaタグを指定したい
	border-radius: 100px;
	width: 220px;
	height: 41px;
	margin: 0 auto;
`;

render(){
   return (
      <TwitterBtn>
           Twitterで新規登録
      </TwitterBtn>
   )
}

Answer 1

export const Button = styled.button`
  font-size: 13px;
  border-radius: 20px;
  height: 30px;
  padding:0;
  cursor: pointer;
  transition: all .2s ease;
  font-weight: bold;
  min-width: ${props => props.width ? props.width : '100px'};
  &:hover {
      opacity:0.7;
  }
`;

const AnchorButton = Button.withComponent('a') // +追加

const TwitterBtn = AnchorButton.extend`  // +継承元変更
    border-radius: 100px;
    width: 220px;
    height: 41px;
    margin: 0 auto;
`;

const AnchorButton = Button.withComponent('a')

これで行けると思います。

Comments

[MapleMomij]

大変助かりました！ありがとうございます。