【React】bodyの背景色変更をもっと自由に！useEffect、CSS in JS、グローバルCSS徹底比較
Reactでbodyの背景色を変更する方法
useEffectフックを使う
最もシンプルでよく使われる方法は、useEffectフックを使う方法です。
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
document.body.style.backgroundColor = 'red';
}, []);
return (
<div>
{/* コンポーネントの内容 */}
</div>
);
}
export default App;
このコードでは、useEffectフック内で document.body.style.backgroundColor プロパティに red を設定することで、bodyの背景色を赤色に変更しています。
CSS-in-JSライブラリを使う
CSS-in-JSライブラリを使用すると、よりスタイリッシュな方法でbodyの背景色を変更することができます。
Styled-components を例に挙げてみます。
import React from 'react';
import styled from 'styled-components';
const Body = styled.body`
background-color: red;
`;
function App() {
return (
<Body>
{/* コンポーネントの内容 */}
</Body>
);
}
export default App;
このコードでは、styled-components を使って Body コンポーネントを作成し、その background-color プロパティを red に設定することで、bodyの背景色を赤色に変更しています。
グローバルCSSを使う
グローバルCSSを使用すると、アプリケーション全体に一貫したスタイルを適用することができます。
body {
background-color: red;
}
このCSSをプロジェクトのルートディレクトリにある global.css などのファイルに保存し、インポートすることで、bodyの背景色を赤色に変更することができます。
- 上記以外にも、コンテキストAPIやCSSモジュールなどを使ってbodyの背景色を変更する方法があります。
- 方法を選ぶ際は、プロジェクトの規模や複雑さ、そして開発者の好みなどを考慮する必要があります。
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
document.body.style.backgroundColor = 'red';
}, []);
return (
<div>
{/* コンポーネントの内容 */}
</div>
);
}
export default App;
説明:
- このコードは、
useEffectフックを使用して、コンポーネントがマウントされた後にbodyの背景色を赤色に変更します。 useEffectフックの第二引数に空の配列を渡すことで、この処理が一度だけ実行されるようにしています。
import React from 'react';
import styled from 'styled-components';
const Body = styled.body`
background-color: red;
`;
function App() {
return (
<Body>
{/* コンポーネントの内容 */}
</Body>
);
}
export default App;
styled-componentsは、コンポーネントにスタイルを直接記述できるCSS-in-JSライブラリです。
body {
background-color: red;
}
Context APIを使うと、コンポーネント階層を越えてデータを共有することができます。この機能を利用して、bodyの背景色をグローバルに設定することができます。
import React, { useState, createContext } from 'react';
const BackgroundColorContext = createContext({
backgroundColor: 'red',
});
function App() {
const [backgroundColor, setBackgroundColor] = useState('red');
return (
<BackgroundColorContext.Provider value={{ backgroundColor, setBackgroundColor }}>
{/* コンポーネントの内容 */}
</BackgroundColorContext.Provider>
);
}
function ChildComponent() {
const { backgroundColor, setBackgroundColor } = useContext(BackgroundColorContext);
return (
<div style={{ backgroundColor }}>
{/* コンポーネントの内容 */}
</div>
);
}
export default App;
- このコードでは、
BackgroundColorContextというContextを作成し、その中にbackgroundColorとsetBackgroundColorというプロパティを定義しています。 Appコンポーネントでは、BackgroundColorContext.Providerコンポーネントを使用して、backgroundColorとsetBackgroundColorの値をコンポーネント階層に提供しています。ChildComponentコンポーネントでは、useContextフックを使用してBackgroundColorContextからbackgroundColorとsetBackgroundColorの値を取得し、それらをdivコンポーネントのスタイルに適用しています。
カスタムフックを使う
カスタムフックを使うと、再利用可能なロジックを作成することができます。この機能を利用して、bodyの背景色を変更するロジックをカプセル化することができます。
import React, { useState } from 'react';
function useBackgroundColor() {
const [backgroundColor, setBackgroundColor] = useState('red');
return {
backgroundColor,
setBackgroundColor,
};
}
function App() {
const { backgroundColor, setBackgroundColor } = useBackgroundColor();
return (
<div style={{ backgroundColor }}>
{/* コンポーネントの内容 */}
</div>
);
}
export default App;
- このコードでは、
useBackgroundColorというカスタムフックを作成し、その中にbackgroundColorとsetBackgroundColorというステートと、それらを操作する関数を実装しています。
CSSモジュールを使う
CSSモジュールを使うと、コンポーネントごとに分離されたCSSを作成することができます。この機能を利用して、bodyの背景色をコンポーネントごとに設定することができます。
.body {
background-color: red;
}
import React from 'react';
import './App.css';
function App() {
return (
<div className="body">
{/* コンポーネントの内容 */}
</div>
);
}
export default App;
- このコードでは、
App.cssというCSSファイルを作成し、その中に.bodyクラスを定義しています。 Appコンポーネントでは、divコンポーネントに.bodyクラスを適用することで、その背景色を赤色に設定しています。
emotionを使う
emotionは、CSS-in-JSライブラリの1つです。スタイリングをコンポーネント内に直接記述できるだけでなく、動的なスタイルを生成したり、テーマを適用したりする機能も備えています。
import React from 'react';
import styled from '@emotion/styled';
const Body = styled.body`
background-color: red;
`;
function App() {
return (
<Body>
{/* コンポーネントの内容 */}
</Body>
);
}
export default App;
- emotionは、CSS-in-JSライブラリの中でも特に使いやすく、強力な機能を備えています。
reactjs
