如何更改Recharts中每个条形图的颜色？

npm install recharts

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 15 },
  { name: 'C', value: 8 },
  { name: 'D', value: 20 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; // 自定义颜色数组

const App = () => {
  return (
    <BarChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="value" fill={COLORS[0]} /> // 设置fill属性为自定义颜色数组的第一个值
    </BarChart>
  );
};

export default App;