Next.jsのコンポーネントにスタイルを適用する

date

Dec 28, 2022

repo_url

slug

nextjs-styling

status

Published

summary

type

Post

thumbnail_url

tags

nextjs

outer_link

デフォルトではstyled-componentsで定義したスタイルは、描画時にスタイルを作成し、classNameをコンポーネントに渡します。

コンポーネント内の特定のコンポーネントにスタイルを適用したい場合は、class属性つまりpropsに渡されるclassNameを任意のコンポーネントに渡します。

次のコードはnext/linkのLinkを使ったリンク用のコンポーネントにスタイルを適用する例です。

import { NextPage } from 'next';
import Link, { LinkProps } from 'next/link';
import styled from 'styled-components';

type BaseLinkProps = React.PropsWithChildren<LinkProps> & {
  className?: string;
  children: React.ReactNode;
};

// Next.jsのリンクにスタイルを適用するためのヘルパーコンポーネント
// このコンポーネントをsytled-comonentsで使用すると、定義したスタイルに対応するclassNameがpropsとして渡される
const BaseLink = (props: BaseLinkProps) => {
  const { className, children, ...rest } = props;
  return (
    <Link {...rest} className={className}>
      {children}
    </Link>
  );
};

const StyledLink = styled(BaseLink)`
  color: violet;
  font-size: 2rem;
`;

const SampleClassname: NextPage = () => {
  return (
    <div>
      <StyledLink href='/'>
        リンク用コンポーネントでスタイリングされたテキストです
      </StyledLink>
    </div>
  );
};

export default SampleClassname;