【Recharts】スタイル指定に CSS Custom Properties を利用する方法

React でのアプリケーション開発にて、Recharts はメジャーなグラフライブラリの1つです。

そんな Recharts では、 style という props からスタイル指定が可能です。以下は、Y軸へのスタイル指定の例。

<YAxis

  // ...ここにその他の props たち

  style={{
    fontSize: '12px',
    fontWeight: 300,
    fontFamily: 'oswald'
  }}
/>

CSS Custom Properties を利用したバージョンが以下の通り。

<YAxis

  // ...ここにその他の props たち

  style={{
    fontSize: 'var(--font-sm)',
    fontWeight: 'var(--font-light)',
    fontFamily: 'var(--font-oswald)',
  }}
/>

文字列としてそのまま書けます。

※ CSS Custom Properties の定義自体は、別のどこか global な場所で行っておく必要があることに留意。

:root {
  /* FONTS SIZE */
  --font-sm: 12px;
  --font-md: 16px;
  --font-lg: 20px;

  /* FONTS WEIGHT */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;

  /* FONTS FAMILY */
  --font-oswald: ... 
}