Recharts는 내부적으로 SVG를 사용하므로, 스타일을 적용하기 위해서는 SVG 요소에 직접 CSS 스타일을 적용해야 합니다. 이를 위해서 Recharts는 style 속성을 제공합니다.

예를 들어, Recharts의 <LineChart> 컴포넌트에서 선 그래프를 스타일링하고 싶다면, style 속성을 사용하여 해당 요소에 CSS 스타일을 적용할 수 있습니다.

아래는 <LineChart>에서 선 그래프를 스타일링하는 예시 코드입니다:

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

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

const App = () => {
  return (
    <LineChart width={500} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
      <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} />
    </LineChart>
  );
};

export default App;

위의 코드에서 Line 컴포넌트에 있는 stroke 속성을 사용하여 선의 색상을 지정할 수 있습니다.

또 다른 스타일링 옵션으로는 CSS 클래스를 사용하는 것이 있습니다. Recharts 컴포넌트에 className 속성을 사용하여 CSS 클래스를 추가할 수 있습니다. 그러면 해당 클래스에 정의된 스타일이 적용됩니다.

앞서 제시한 예시 코드에서 다음과 같이 className 속성을 추가하여 CSS 클래스를 적용하는 방법을 보여드리겠습니다:

// ...
<Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} className="custom-line" />
// ...

위의 코드에서 className 속성값으로 "custom-line"을 지정하면, 이 클래스에 정의된 스타일이 <Line> 요소에 적용됩니다. 이를 통해 더 세부적인 스타일링을 적용할 수 있습니다.

스타일을 적용할 때는 CSS의 선택자 우선순위와 상속 개념에 주의해야 합니다. 필요한 경우 CSS 선택자를 사용하여 원하는 요소를 정확히 대상으로 지정할 수 있도록 하세요.