I originally picked MUI with nextjs because I'm in a scenario where I want to dynamically style a common site depending on a user's configuration. Imagine a shopify-style experience where customers can override default styles of their store to change their look and feel. The idea is that they can use components from a library I'll publish to fine-tune appearance, but they can also just change some simple design token properties to make high level changes without going into details. The way I did this is to have a base json class to set the base styles; a bit like so:

const colors = { primary: '#FF00FF' }

Then, with MUI I createTheme, setting general styles and overriding general components to get the look and feel I want using the basic tokens I defined in the first step.

The problem is that the further I get into this project, the more I realize that MUI is forcing me to make every component a client-component. This is mostly because MUI is forcing me to use ThemeProvider as a root element for many of the components and, as soon as that happens, everything ends up needing to use client. This seems to defeat the purpose of using nextjs and, in general, seems like bad practice.

This is a 1-person startup, so I don't want to throw away the work I've already done, but I'm at the point where I'm realizing that I'm going in a bad direction. I don't want to double down on this without knowing the consequences of what I'm doing or what my alternatives are. I think that at some point I'm going to want to get a real designer and introduce tailwinds. Whenever that happens I don't know that MUI is going to make sense. Can anyone provide advice on what my options are and chip in on I should do?

Thank you for any help!