スタイルを別のコンポーネントで使用する（as の利用）
date
Dec 27, 2022
repo_url
slug
nextjs-as
status
Published
summary
type
Post
thumbnail_url
tags
nextjs
outer_link
スタイルを定義したコンポーネントを別のHTML要素で使いたい場合、propsのasに使いたい要素名を指定するとその要素で表示できます。
import { NextPage } from 'next';
import styled, { css } from 'styled-components';
const LinkText = css`
text-decoration: underline;
`;
const Text = styled.p`
color: lime;
font-size: 2rem;
font-weight: bold;
${LinkText}
`;
const SampleAs: NextPage = () => {
return (
<div>
<Text as='a' href='/'>
asで別要素としてスタイリングされたテキストです
</Text>
</div>
);
};
export default SampleAs;