Why do css-in-js systems need ThemeProvider/useTheme

Question

(or similarly named depending on library)

Are these functions purely for ease of use in accessing the theme within an app or do they provide some functional/performance benefit?

What is the difference between me accessing a theme directly by importing it into a component or accessing it through the ThemeProvider?

Answer 1

I think any performance deficit or gain is negligible. They do however provide ease of use, as it is easier to get the theme inline, like color: ${(theme) => theme.colors.primary} without having to import the theme file each and every time. There are also helpers for this to make the access less verbose.

Another big benefit is when you need to use different themes or swap them on the fly. A ThemeProvider will update as needed, and you can even use different theme variations nested within the main theme. Really helpful if you're doing dark mode etc.