React项目中如何用自定义Tailwind CSS颜色配置Chart.js标签颜色？

问题背景 #

我正在开发一个React应用，用Chart.js渲染图表，想要通过Tailwind CSS配置的自定义颜色来设置图表的标签（包括图例、坐标轴刻度）颜色。已经在tailwind.config.js和全局CSS中配置了基于主题的自定义颜色，但不知道如何把这些颜色应用到Chart.js的配置里。

相关代码如下：

index.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

.theme-light {
  --labelColor: #000000;
}

.theme-dark {
  --labelColor: #ffffff;
}

tailwind.config.js #

module.exports = {
  theme: {
    extend: {
      colors: {
        labelColor: 'var(--labelColor)',
      },
    },
  },
  plugins: [],
};

chart.jsx #

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const Graph = ({ chartData }) => {
  const options = {
    plugins: {
      legend: {
        display: true,
        labels: {
          usePointStyle: true,
          color: **labelColor**, // 此处需替换为正确颜色值
        }
      }
    },
    scales: {
      x: {
        ticks: {
          display: true,
          color: **labelColor**, // 此处需替换为正确颜色值
        }
      },
      y: {
        ticks: {
          display: true,
          color: **labelColor**, // 此处需替换为正确颜色值
        }
      }
    }
  }

  const datasets = [];

  chartData.forEach((data, index) => {
    datasets.push({
      label: data.name,
      data: data.data,
    });
  });

  const data = {
    labels: chartData[0].labels,
    datasets: datasets,
  }

  return <Bar data={data} options={options} />;
}

export default Graph;

可行方案 #

方案1：直接在Chart.js中使用CSS变量 #

Chart.js原生支持解析CSS变量，无需额外JS逻辑，直接在配置中引用你定义的--labelColor即可：

const options = {
  plugins: {
    legend: {
      display: true,
      labels: {
        usePointStyle: true,
        color: 'var(--labelColor)', // 直接使用CSS变量
      }
    }
  },
  scales: {
    x: {
      ticks: {
        display: true,
        color: 'var(--labelColor)',
      }
    },
    y: {
      ticks: {
        display: true,
        color: 'var(--labelColor)',
      }
    }
  }
}

主题切换时，CSS变量值会自动更新，Chart.js也会同步应用新颜色，无需额外处理。

方案2：读取CSS变量的实际值 #

如果你需要获取颜色的具体十六进制值（比如后续有其他JS逻辑需要使用），可以通过getComputedStyle读取：

import React, { useMemo } from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const Graph = ({ chartData }) => {
  // 读取根元素的CSS变量，useMemo避免重复计算
  const labelColor = useMemo(() => {
    return getComputedStyle(document.documentElement).getPropertyValue('--labelColor').trim();
  }, []);

  const options = {
    plugins: {
      legend: {
        labels: {
          usePointStyle: true,
          color: labelColor,
        }
      }
    },
    scales: {
      x: { ticks: { color: labelColor } },
      y: { ticks: { color: labelColor } }
    }
  }

  // 数据集处理逻辑保持不变
  const datasets = chartData.map(data => ({
    label: data.name,
    data: data.data,
  }));

  const data = {
    labels: chartData[0].labels,
    datasets,
  }

  return <Bar data={data} options={options} />;
}

export default Graph;

如果主题是动态切换的，记得把主题状态添加到useMemo的依赖数组中，确保颜色实时更新。

方案3：通过Tailwind的useTheme钩子获取 #

若你使用了Tailwind的官方工具包（如tailwindcss-react-native），可以通过useTheme钩子直接读取配置中的颜色：

import { useTheme } from 'tailwindcss-react-native'; // 根据环境引入对应包

const Graph = ({ chartData }) => {
  const theme = useTheme();
  const labelColor = theme.colors.labelColor; // 返回值为'var(--labelColor)'

  const options = {
    plugins: {
      legend: { labels: { color: labelColor } }
    },
    scales: {
      x: { ticks: { color: labelColor } },
      y: { ticks: { color: labelColor } }
    }
  }

  // 其余逻辑保持不变
}

推荐方案 #

最简洁且无额外依赖的是方案1，直接在Chart.js配置中使用CSS变量，自动适配主题切换，无需编写额外JS逻辑。

内容的提问来源于stack exchange，提问作者Digitalwolf