RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

styled-components入門【使い方・まとめ】

f:id:hy094:20210316180002p:plain

目次

はじめに

初めまして。フロントエンドチーム 新卒1年目のhy094です。

業務でstyled-componentsを使う機会があったのでまとめたいと思います。

styled-componentsとは

CSS in JSの一つです。

JSの中にスタイルを記述できるので、
CSSファイルが必要なくなることやtypoをエラーで教えてくれたりするメリットがあります。

また、コンポーネント単位で装飾するためReactとの親和性が高いです。

使用環境

上記の通り、Reactとの親和性が高いためReactを使用します。

折角なので弊社のブログ記事に書かれている内容を装飾していきます。

使用する環境・ソースコードなどはこちら↓

tech-blog.rakus.co.jp

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文のみです。

ここまでの作業でリンクのスタイルが変わっています。


f:id:hy094:20210316172433g:plain

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の時、青背景のボタン風リンクになります。


f:id:hy094:20210316171607g:plain


リンク以外の装飾

const StyledLink = styled.aでリンクの装飾ができました。

ではリンク以外の装飾はどうするのでしょうか。

答えは単純でh1ならstyled.h1divならstyled.divです。


VSCode拡張機能

ここまで作業するとLink.jsは以下のような表示になっているのではないでしょうか。

f:id:hy094:20210316165853p:plain


見にくいですね。また、CSSの補完も効きません。

そこで便利なのがVSCode拡張機能vscode-styled-componentsです。

この拡張機能を使うと・・・

f:id:hy094:20210316172507p:plain

非常に見やすくなり、補完も効くようになります。

styled-componentsを書くならぜひ抑えておきたい拡張機能だと思います。

おわりに

今回はstyled-componentsのさわりについて紹介させていただきました。

スタイルの話やデザイン関連の話はあまりできませんでしたが

もしそちらにご興味ある方は弊社デザイナーチームのブログがあるので、

よかったらご覧ください!↓

note.com

現在はチームの話などが多いですが、今後記事数はどんどん増えていくと思います。

styled-componentsと親和性の高いatomic-designについて記事ができることを密かに楽しみにしています。

参考

Copyright © RAKUS Co., Ltd. All rights reserved.