So I needed to restyle 'react-calendar', and as stated in Readme on NPM, I imported the original stylesheet. For some reason, editing it didn't affect the style, but I worked around this issue by importing a new file with contents copied from the original one. But my problem is that I have an app with the possibility of switching between light and dark themes, and I can't figure out how to implement this functionality in 'react-calendar' component.
I dug around in the source files and found a variable called baseClassName in Calendar.jsx file. I suggested that classes of child components are generated programmatically based on baseClassName's value, so I can just change it to 'react-calendar-light' or 'react-calendar-dark' to get the effect I'm after. But changing the value didn't even affect the parent div's class name, as stated by the browser console. Besides, I found mentions of other classes like '.react-calendar__tile' in other files, so it appears that my theory is incorrect.
Is there any way to achieve the effect I'm after without severely modifying 'react-calendar'? I'm not that experienced yet, and I'm afraid I'll just mess the component up beyond repair.
You can add custom css, in react-calendar's official website they provided the code.
where you want to change the style , you can see the console and get the exact class and implement the style on that class.
https://www.npmjs.com/package/react-calendar?activeTab=readme