かべブログ

TypeScript, React, Goなどでまったり個人開発。たまに競プロ。

styled-components 素振り

はじめに

こんにちは、かべです。CSS ヘタクソ芸人やめたかったので styled-components やりました。これやっても結局中の CSS 書けなかったら意味ないような気はしますが…

今回は導入と簡単な使い方のみやります。基本的な書き方とその上書きくらいしかやらないため、高度な利用法を探していらっしゃる方のご期待には沿えません。

環境

今回の開発は以下の環境で行いました。

  • Ubuntu 20.04.1
  • yarn 1.22.5
  • styled-components 5.2.3
  • React 17.0.2
  • TypeScript 4.0

styled-components の導入

まず、React の新規プロジェクトを作成します。いつものように npx create-react-app {好きな名前} --template typescript を使います。完成したらそのプロジェクトへ移動し、以下のコマンドで styled-components やその他必要なものを入れます。

yarn add styled-components @types/styled-components babel-plugin-styled-components

@types/styled-components は TypeScript 上で styled-components を使用する際に必要で、babel-plugin-styled-components公式ドキュメント でバンドルサイズなどの観点から推奨されています。また、複数のバージョンの styled-components がプロジェクトに導入されないよう package.json に次の記述を追加します。

"resolutions": {
  "styled-components": "^5"
}

これで準備完了です。早速書き始めていきましょう。

基本的な使い方

今回は生成されたプロジェクトの src/App.tsx を書き換えて遊んでいきます。一番簡単な使い方は、React の JSX をさらに修飾するイメージで CSS を書く方法です。

arc/App.tsx

import { FC } from "react";
import styled from "styled-components";

const MyTitle = styled.h1`
  font-size: 2em;
  text-align: center;
  color: cornflowerblue;
`;

const App: FC = () => {
  return (
    <>
      <MyTitle>Welcome to my page!!</MyTitle>
    </>
  );
};

export default App;

このような書き方で <MyTitle></MyTitle> 内の要素を h1 内に入れつつスタイルを当てることが出来ます。また、CSS in JS ということで中に式を書くこんな書き方も出来ます。

/* 略 */

const MyButton = styled.button`
  background: ${(props) =>
    props.className === "blue" ? "cornflowerblue" : "white"};
  color: ${(props) =>
    props.className === "blue" ? "white" : "cornflowerblue"};

  font-size: 1.5em;
  margin: 1em;
  padding: 1em 3em;
  border: 2px solid cornflowerblue;
  border-radius: 3px;
`;

/* 略 */

これによって <MyButton></MyButton>className="blue" を付加した時に背景と文字の色が変化します。

また、styled は styled component 自体を引数に取って上書きすることが出来ます。

/* 略 */

const OverRidedButton = styled(MyButton)`
  background: white;
  color: lightseagreen;
  border-color: lightseagreen;
`;

/* 略 */

これによって既存の styled component を基調に上書きなどを行うことが出来ます。これらを使って次のコードで適当に並べてみると、画像のようにスタイルが効いていることを確認できます。

import { FC } from "react";
import styled from "styled-components";

const MyTitle = styled.h1`
  font-size: 2em;
  text-align: center;
  color: cornflowerblue;
`;

const CenteredDiv = styled.div`
  text-align: center;
`;

const MyButton = styled.button`
  background: ${(props) =>
    props.className === "blue" ? "cornflowerblue" : "white"};
  color: ${(props) =>
    props.className === "blue" ? "white" : "cornflowerblue"};

  font-size: 1.5em;
  margin: 1em;
  padding: 1em 3em;
  border: 2px solid cornflowerblue;
  border-radius: 3px;
`;

const OverRidedButton = styled(MyButton)`
  background: white;
  color: lightseagreen;
  border-color: lightseagreen;
`;

const App: FC = () => {
  return (
    <>
      <MyTitle>Welcome to my page!!</MyTitle>
      <CenteredDiv>
        <MyButton>Skills</MyButton>
        <MyButton className="blue">Works</MyButton>
        <OverRidedButton>Links</OverRidedButton>
      </CenteredDiv>
    </>
  );
};

export default App;

f:id:okb_okb:20210414121145p:plain
完成

今回使用したコードはこちらにアップロードしています。

終わりに

styled-components の基本的な導入や使い方について触れてみました。Advanced な機能もそうですが、そもそも CSS をちゃんと書けるように精進します。