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;
今回使用したコードはこちらにアップロードしています。
終わりに
styled-components の基本的な導入や使い方について触れてみました。Advanced な機能もそうですが、そもそも CSS をちゃんと書けるように精進します。