目次
はじめに
初めまして。フロントエンドチーム 新卒1年目のhy094です。
業務でstyled-componentsを使う機会があったのでまとめたいと思います。
styled-componentsとは
CSS in JSの一つです。
JSの中にスタイルを記述できるので、
CSSファイルが必要なくなることやtypoをエラーで教えてくれたりするメリットがあります。
また、コンポーネント単位で装飾するためReactとの親和性が高いです。
使用環境
上記の通り、Reactとの親和性が高いためReactを使用します。
折角なので弊社のブログ記事に書かれている内容を装飾していきます。
使用する環境・ソースコードなどはこちら↓
Reactの入門記事になります。ぜひご覧ください。
※本記事は上の記事の内容を実施した直後という状態を想定して進めていきます。
環境構築
上記の記事だけだとstyled-componentsがインストールされていないので、 追加でインストールします。
npm install styled-components
package.jsonに"styled-components": "^5.2.1",
のような記述があれば問題なく成功しています。
styled-componentsでの装飾
リンクの装飾
元記事をそのまま実施していただいている場合、 フォルダ構成は以下のようになっていると思います。
├── node_modules/ ├── package.json ├── public/ ├── README.md ├── src/ │ ├── page │ │ ├── one.js │ │ └── two.js │ └── routes.js └── yarn.lock
まずはコンポーネントを配置するためのフォルダをsrc以下に作成します。
src/components
次に、src/components以下にLinkコンポーネントを作成します。
src/components/Link.js
import React from "react"; import styled from 'styled-components' export const Link = ({to,children}) => { return <StyledLink href={to}>{children}</StyledLink> }; const StyledLink =styled.a` //ここにスタイルを記述 outline: none; text-decoration: none; display: inline-block; width: 19.5%; margin-right: 0.625%; text-align: center; line-height: 3; color: black; background: yellow; &:hover{ background: orange; } &:active { background: red; color: white; } `
//ここにスタイルを記述
以降にお好きなスタイルを記述してください。
今回はMDNのリンクの装飾をお借りしたいと思います。
次に作成したLinkコンポーネントをアプリの方でimportします。
src/page/one.js
import React from 'react'; - import { Link } from 'react-router-dom'; + import { Link } from '../components/Link'; import Two from './two'; class One extends React.Component{ render(){ return ( <div> test_one<br/> <Link to='/two'>twoへ</Link> </div> ) } } export default One;
src/page/two.js
import React from 'react'; - import { Link } from 'react-router-dom'; + import { Link } from '../components/Link'; import One from './one'; class Two extends React.Component{ render(){ return ( <div> test_two<br/> <Link to='/'>oneへ</Link> </div> ) } } export default Two;
見ていただくと分かる通り、差分は2行目のimport文のみです。
ここまでの作業でリンクのスタイルが変わっています。
propsを使ったリンクの装飾
「リンクといえばこのスタイル」という規則が決まっていれば、
今後は<Link>○○</Link>
を使うことでclassなどを指定する必要がなくなります。
しかし今の表示だと自分がoneにいるのかtwoにいるのか分かりにくいですね。
そこでoneとtwoでスタイルを変えたいと思います。
src/components/Link.js
import React from "react"; import styled,{ css } from 'styled-components' export const Link = ({to,children,fontColor,isBluePattern}) => { return <StyledLink href={to} fontColor={fontColor} isBluePattern={isBluePattern}>{children}</StyledLink> }; const StyledLink =styled.a` //ここにスタイルを記述 outline: none; text-decoration: none; display: inline-block; width: 19.5%; margin-right: 0.625%; text-align: center; line-height: 3; color:${(props) => props.fontColor}; ${(props) => props.isBluePattern ? (css` background: aquamarine; &:hover{ background: aqua; } &:active { background: blue; color: white; }`): (css` background: yellow; &:hover{ background: orange; } &:active { background: red; color: white; }`) }`
src/page/one.js
import React from 'react'; import { Link } from '../components/Link'; import Two from './two'; class One extends React.Component{ render(){ return ( <div> test_one<br/> <Link to='/two' fontColor="blue" isBluePattern={false}>twoへ</Link> </div> ) } } export default One;
src/page/two.js
import React from 'react'; import { Link } from '../components/Link'; import One from './one'; class Two extends React.Component{ render(){ return ( <div> test_two<br/> <Link to='/' fontColor="red" isBluePattern={true}>oneへ</Link> </div> ) } } export default Two;
少し無理矢理感もありますが、これでページごとにスタイルが変わります。
color:${(props) => props.fontColor};
で、<Link>
に指定したfontColor
の色が文字色となります。
oneは青、twoは赤ですね。
また、
${(props) => props.isBluePattern ? (css` //以下略
三項演算子とcss
によってまとめてスタイルを指定できます。
isBluePatternがtrueの時、青背景のボタン風リンクになります。
リンク以外の装飾
const StyledLink = styled.a
でリンクの装飾ができました。
ではリンク以外の装飾はどうするのでしょうか。
答えは単純でh1
ならstyled.h1
、div
ならstyled.div
です。
VSCodeの拡張機能
ここまで作業するとLink.jsは以下のような表示になっているのではないでしょうか。
見にくいですね。また、CSSの補完も効きません。
そこで便利なのがVSCodeの拡張機能vscode-styled-componentsです。
この拡張機能を使うと・・・
非常に見やすくなり、補完も効くようになります。
styled-componentsを書くならぜひ抑えておきたい拡張機能だと思います。
おわりに
今回はstyled-componentsのさわりについて紹介させていただきました。
スタイルの話やデザイン関連の話はあまりできませんでしたが
もしそちらにご興味ある方は弊社デザイナーチームのブログがあるので、
よかったらご覧ください!↓
現在はチームの話などが多いですが、今後記事数はどんどん増えていくと思います。
styled-componentsと親和性の高いatomic-designについて記事ができることを密かに楽しみにしています。
参考
- https://qiita.com/snishinon/items/9ea9c2f981ef081e825f
- https://zenn.dev/syu/articles/0f92abf7f0b5c5
- https://qiita.com/taneba/items/4547830b461d11a69a20
- https://www.webprofessional.jp/style-react-components-styled-components/
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.comラクスDevelopers登録フォーム
https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください!
◆TECH PLAY
techplay.jp
◆connpass
rakus.connpass.com