【React】共通のレイアウト部分をまとめる

下は色のみ異なる２つのボタンがあります。

今回はスタイル部分がbackground-color以外は一緒なのでそこの共通部分のスタイルを共通してコードをすっきりさせていきます。

import React from "react";
import "./styles.css";
import { PrimaryButton } from "./components/PrimaryButton";
import { SecondryButton } from "./components/SecondryBUtton";

export default function App() {
  return (
    <div className="App">
      <PrimaryButton>詳細</PrimaryButton>
      <SecondryButton>検索</SecondryButton>
    </div>
  );
}

import React from "react";
import styled from "styled-components";

export const PrimaryButton = (props) => {
  const {children} = props;
    return <SButton>{children}</SButton>;
};

const SButton = styled.button`
  background-color: #40514e;
//以下の部分を共通化
  color: #fff;
  padding: 6px 24px;
  border-radius: 99999px;
  outline: none;
  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }
`

import React from "react";
import styled from "styled-components";

export const SecondryButton = (props) => {
  const {children} = props;
    return <SButton>{children}</SButton>;
};

const SButton = styled.button`
  background-color: #698911;
//以下の部分を共通化
  color: #fff;
  padding: 6px 24px;
  border-radius: 99999px;
  outline: none;
  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }
`

共通部分のスタイルをまとめるコンポーネントを作成していきます。

import styled from "styled-components";

export const BaseButton = styled.button`
  color: #fff;
  padding: 6px 24px;
  border-radius: 99999px;
  outline: none;
  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }
`;

そして、既存のファイルのPrimaryButton.jsxとSecondryButton.jsxを以下のように変更します。

import React from "react";
import styled from "styled-components";
import { BaseButton } from "./BaseButton";

export const PrimaryButton = (props) => {
  const { children } = props;
  return <SButton>{children}</SButton>;
};

const SButton = styled(BaseButton)`
  background-color: #40514e;
`;

こうすることでBaseButttonの要素をもったまま更にプラスの要素を加えていくことができます。