こんにちは、白々さじきです。
今回は、Reactプロジェクトで色などのデザイン値を一元管理する方法についてまとめます。
#fbbf24 のような色コードをあちこちに直接書いていると、デザインを変えたいときに全ファイルを探して修正する羽目になります。これを解決するのが「デザイントークン」という考え方です。
結論
色・フォントサイズ・余白などのデザイン値に名前を付けて theme.ts に集め、コンポーネントからimportして使います。変更が1箇所で済み、管理が楽になります。
デザイントークンとは
デザイントークンとは、デザインに使う値（色・サイズ・余白など）に意味のある名前を付けて管理する考え方です。
| 直接書く | デザイントークン |
|---|---|
color: '#fbbf24' | color: colors.gold |
background: '#1a1f3a' | background: colors.bg.dark |
値を変えたいときは theme.ts の1箇所を直すだけで、importしているすべての場所に反映されます。
TypeScript定数ファイルを作る
src/styles/theme.ts を作成して export const で定数を定義します。
// src/styles/theme.ts
export const colors = {
bg: {
dark: '#1a1f3a',
purple: '#2d1b3d',
navy: '#1a2332',
},
accent: {
gold: '#fbbf24',
purple: '#8b5cf6',
},
text: {
primary: '#e8e6e3',
},
};
export const gradients = {
main: 'linear-gradient(135deg, #1a1f3a 0%, #2d1b3d 50%, #1a2332 100%)',
};コンポーネントからimportして使います。
// App.tsx
import { colors, gradients } from './styles/theme';
const App = () => {
return (
<div style={{ background: gradients.main, color: colors.text.primary }}>
...
</div>
);
};backgroundColor と background の違い
グラデーションを設定するときに詰まりやすいポイントがあります。
// NG: グラデーションは backgroundColor に入れられない（単色のみ）
style={{ backgroundColor: 'linear-gradient(...)' }}
// OK: background を使う
style={{ background: 'linear-gradient(...)' }}backgroundColor は単色のみ受け付けます。グラデーション（linear-gradient）や画像を使いたい場合は background を使います。
body全体に背景色を適用する
Reactの <div> に背景を設定しても、その外側（<body>）はデフォルトの白のままです。ページ全体に背景色を適用するには main.tsx でReactをマウントする前に設定します。
// main.tsx
import { gradients } from './styles/theme';
// Reactのマウント前にbodyに直接設定する
document.body.style.background = gradients.main;
document.body.style.margin = '0';
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);document.body.style はCSSプロパティと同じ名前（キャメルケース）で指定できます。theme.ts からimportすることで、色の定義はTypeScript側に一元管理できます。
まとめ
- デザイン値を
theme.tsに集めて名前を付けるのが「デザイントークン」の考え方 - ReactのインラインスタイルはTypeScript定数と相性がいい
- グラデーションは
backgroundColorではなくbackgroundで指定する - body全体の背景は
main.tsxのdocument.body.styleで設定する
最初は色をベタ書きしていたのですが、変更のたびに複数ファイルを直す手間が出てきて導入しました。型補完も効くので入力ミスも減ります。
参考リンク
サポートのお願い
下記リンクからお買い物いただけると、ブログ運営のための費用が増え、有料サービスを利用した記事作成が可能になります。ご協力よろしくお願いします！
コメント