ReactでCSS変数を定義する

React、TypeScript でスタイル属性に CSS 変数を定義する方法

React と TypeScript を組み合わせて開発する際に、スタイル属性に CSS 変数 を定義する方法について説明します。

CSS 変数の基本

CSS 変数は、スタイルシート内で変数を定義し、再利用可能な値を作成するための仕組みです。これにより、スタイルの管理が効率的になります。

例

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

React コンポーネントでのスタイル属性

React コンポーネントのスタイル属性には、オブジェクト形式でスタイルを指定します。CSS 変数を参照するには、var() 関数を使用します。

import React from 'react';

function MyComponent() {
  return (
    <div style={{
      backgroundColor: 'var(--primary-color)',
      color: 'var(--secondary-color)'
    }}>
      This is my component
    </div>
  );
}

TypeScript で型安全を確保

TypeScript を使用することで、スタイル属性の型安全を確保できます。スタイルオブジェクトの型を定義し、CSS 変数を参照する際に正しい型を使用します。

import React from 'react';

interface MyComponentProps {
  style?: {
    backgroundColor: string;
    color: string;
  };
}

function MyComponent(props: MyComponentProps) {
  return (
    <div style={{
      backgroundColor: 'var(--primary-color)',
      color: 'var(--secondary-color)',
      ...props.style
    }}>
      This is my component
    </div>
  );
}

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

import React from 'react';

function MyComponent() {
  return (
    <div style={{
      backgroundColor: 'var(--primary-color)',
      color: 'var(--secondary-color)'
    }}>
      This is my component
    </div>
  );
}

import React from 'react';

interface MyComponentProps {
  style?: {
    backgroundColor: string;
    color: string;
  };
}

function MyComponent(props: MyComponentProps) {
  return (
    <div style={{
      backgroundColor: 'var(--primary-color)',
      color: 'var(--secondary-color)',
      ...props.style
    }}>
      This is my component
    </div>
  );
}

CSS Modules

CSS Modules は、CSS ファイルをモジュール化し、名前空間を付与することで、グローバルなスタイルの衝突を防ぐ方法です。CSS 変数を定義し、モジュール内で使用することができます。

// MyComponent.module.css
.component {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

import React from 'react';
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div className={styles.c   omponent}>
      This is my component
    </div>
  );
}

Styled Components

Styled Components は、JavaScript でスタイルを定義し、React コンポーネントに適用するライブラリです。CSS 変数を定義し、テンプレート文字列を使用してスタイルを生成することができます。

import styled from 'styled-components';

const MyComponent = styled.div`
  background-color: var(--primary-color);
  color: var(--secondary-color);
`;

function MyComponent() {
  return (
    <MyComponent>
      This is my component
    </MyComponent>
  );
}

Emotion

Emotion は、Styled Components と同様の機能を提供するライブラリです。CSS 変数を定義し、テンプレート文字列を使用してスタイルを生成することができます。

import { css } from '@emotion/react';

const myComponentStyles = css`
  background-color: var(--primary-color);
  color: var(--secondary-color);
`;

function MyComponent() {
  return (
    <div css={myComponentStyles}>
      This is my component
    </div>
  );
}