[BUG] Sider mixes dark and light theme classes

[dgonsan]

Describe the bug Default sider mixes dark and light AntD themes in its children. I have been checking and it seems that the issue comes from AntD as it has different defaults for the Layout.Sider component, and the Menu component, the first default to dark and the later to light theme.

If you want to use your own css extended from the default AntD you have to mix light and dark configurations which shouldn't be needed.

To Reproduce It's as easy as using the default AntD styles instead of the Refine provided one "antd/dist/antd.css". If you do that in the default generated application that you get following the tutorial you get a sider that mixes dark and light themes. See screenshot below.

Expected behavior The theme setup should be consistent between the default provided elements so it's possible to easily override it using AntD styles. One solution may be to set a default dark or light and provide an option to override it on the Sider.

Screenshots

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context

[omeraplak]

Hey @dgonsan , Thank you for contacting us. Let's see what we can do 🚀

[omeraplak]

Hey @dgonsan , Refine does not specify any theme in Sider and Menu components. It seems that Ant Design wants us to specify it. But when we specify this, there will be different customization issues.

I think it is best to manage Sider yourself by following this document,

https://refine.dev/docs/ui-frameworks/antd/hooks/resource/useMenu/#recreating-the-default-sider-menu

Please let me know if I missed something

[dgonsan]

Hey @omeraplak,

Thanks for the quick answer. I know about that feature, that's what I end up doing, but that means that I have to maintain a fork of that code just to set up the proper CSS styles and I'm not talking about some strange CSS construct but something provided by the upstream AntD library.

In this case I think that f you are embedding the Menu in a Sider component, which have different defaults in AntD, it would be preferable to also set the Menu theme to dark to match the parent Sider component, or alternatively using light theme on the Sider, as I don't see any use case where you don't want the themes not matching specially if we take into consideration that it breaks with the default AntD CSS which in my opinion is a bad user experience for a library that is supposed to support AntD.

I apologize if my criticism sounds to harsh, other than that and a few other hiccups with other styles (it always has to be CSS :P) I have had a great experience evaluating it to use in future projects. Great work!

[omeraplak]

Hey @dgonsan , I'm not sure exactly what we should do. Can you create a PR for us? :)

[dgonsan]

Hey @omeraplak ,

I prepared a PR with my proposal, as you can see there the changes are not so big, it's just matching the menu theme to the parent sider theme and then some small changes to not break the included Refine theme. That way it's possible to use the default sider component and switch to the AntD styles without breaking anything as now the menu theme matches the one applied in the sider.

[omeraplak]

Hey @dgonsan , Thank you so much. Really great job! but since this change causes breaking change, we will wait a bit. Thanks a lot for your understanding 👊

[dgonsan]

Hey @omeraplak,

No problem, I'm just using the workaround of copying the code sider code into my project and applying the changes there, not as "out of the box" experience but it works fine that way. So, no hurry.

[omeraplak]

We've fixed this issue with ant design v5 support ❤️