【React】CSSを動的に使う方法

今回はReactでCSSを動的に使用する方法を書きます。

CSSを動的にする

下記のようなスクロールするバーを作成して、バーをいじるとボタンの色や大きさが変化する機能をつくります。
react css

具体的な動きは次のとおりです。
ボタンの長さのバーを使用してボタンの長さを変更します。

react css

ボタンの高さのバーを使用してボタンの高さを変更します。
react css

ボタンの角丸のバーを使用してボタンの角を丸めます。
react css

ボタンの色をクリックすると、色パレットが表示されますので、ボタンの色を任意の色に変更します。
react css

このようにボタンの印象が変わりました。
react css

styled componentsをインストール

Reactのコードを見ていく前に、styled componentsをインストールします。
公式サイトのとおりにインストールします。

npm install —save styled-components

package.jsonを確認すると、バージョン5.3.6がインストールされています。
react css

styled-componentsをインポートします。
import styled from 'styled-components'

inputタグを記述

可変するスクロールバーとボタンとなる部分を記述します。

 <label htmlFor="width">ボタンの長さ</label>

 <input type="range" name="width" id="width" min="3" max="60" defaultValue={widthValue} onChange={onwWdthChange}/>

 {widthValue}

 </div>

 <div className="">

 <label htmlFor="height">ボタンの高さ</label>

 <input type="range" name="height" id="height" min="3" max="50" defaultValue={heightValue} onChange={onHeightChange}/>

 {heightValue}

 </div>

 <div className="">

 <label htmlFor="radius">ボタンの角丸</label>

 <input type="range" name="radius" id="radius" min="0" max="100" defaultValue={radiusValue} onChange={onRadiusChange}/>

 {radiusValue}

 </div> 

 <div className="">

 <label htmlFor="color">ボタンの色</label>

 <input type="color" name="color" id="color" defaultValue={colorValue} onChange={onColorChange}/>

 {colorValue}

 </div>

 <div className="">

 <div className="" id="box"></div>

 </div>

 <Box>ボタン</Box>

styled-componentsを定義

<Box>というタグは、下記のように定義しています。
名前はBoxで、htmlの機能はdivです。
divのCSSを次のように書いています。
波括弧{ }で囲っている部分は、このあと定義します。
バッククォート ` で全体を囲っている点にご注意ください。
const Box = styled.div`

width: ${widthValue}em;

height: ${heightValue}em;

 


border-radius: ${radiusValue}em;

background: ${colorValue};

border:#ddd 2px solid;

text-align: center;

 


 `;

値の変化を取得する

useStateとonChangeを使用して、値の変化を取得します。

useStateをインポートします。

import React, {useState} from 'react'
const [widthValue, setWidthValue] = useState("5")

const onWidthChange = e => setWidthValue(e.target.value)

const [heightValue, setHeightValue] = useState("2")

const onHeightChange = e => setHeightValue(e.target.value)

const [radiusValue, setRadiusValue] = useState("0")

const onRadiusChange = e => setRadiusValue(e.target.value)

const [colorValue, setColorValue] = useState("#FFFFEE")

const onColorChange = e => setColorValue(e.target.value)

以上をReactコンポーネントに記述することで、CSSを動的に動かすことができました。

まとめ

最後までお読みいただきありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください