styles from local css class instead of inline styles or global overrides

[gaurav5430]

What works:

• Recharts allows customizing the styles for all components by passing in inline styles to appropriate properties. Question: API documentation on changing the style #574
• Developers can also override the css globally.

What does not work:

• There seems to be no way currently to pass on css classes to components instead of inline styles.
• Inline styles and global styles overrides have issues with specificity. Option for disabling inline styles? #210 (comment)

if at all Recharts can forward the className to the underlying component, a lot of these problems would be solved.
This kind of api is already supported by a lot of libraries. Here is an example of how it could be supported:

then the developer are free to use css-modules or any other setup to create this className, and recharts can just apply this class on the container element of the Line (This would be the same element where "recharts-layer recharts-line line" class in being applied right now.

This kind of requirement was also discussed in #210 (comment)
but the issue was closed without a definitive solution.

It seems that the developers did not want to add css-modules inside recharts. The solution or the setup that I am suggesting does not need css-modules inside Recharts, all that setup can still be in user land. Recharts just has to add the passed in class to the className for the rendered element

[DesignByOnyx]

Came here looking for a similar thing, but discovered that classes are attached on some of the elements: BarChart, Label and Bar get class names. The xAxis and yAxis already get classNames that you can target. You can also render a <style> tag inside of BarChart, and for "ticks" you can render custom svg elements and give them class names too.

[gaurav5430]

oh ok, good to see that some components accept className.

The xAxis and yAxis already get classNames that you can target

Yes, but these need to be too specific to target and can't be scoped with something like css-modules

You can also render a <style> tag inside of BarChart

That would still be inline css, but good to know.

and for "ticks" you can render custom svg elements and give them class names too

Agreed, it is possible to do this for any elements we can/ want to customize, Labels/Tooltips/shape etc.

All in all, what i want to do is possible in some cases, either because Recharts supports that api for some components, or because we can pass in a custom component, but this is still not possible to style a lot of existing components using scoped classNames

[ckifer]

There's been quite a few fixes of these since last post here. I think next patch release should update another ~3 as well just for an update. There still are probably some hiding