Advice: CustomWidget or adjust CSS? Surveyjs with Next.js, Material UI v5 (custom theme)

I would appreciate some advice. This is the current situation:

• nextjs app with material ui v5 which uses a custom theme
  • this theme gets used in multiple apps, so the look and feel are always the same
• I want to build surveys forms via the creator and use all the available features

The survey components should look like the mui elements. I saw in the documentation that there are two possible ways:

• create a CustomWidget, which works nicely, e.g.:

    CustomWidgetCollection.Instance.add({
        name: 'mui-text-field',
        isFit: (question: QuestionTextModel) => question.getType() === 'text',
        render: (question: QuestionTextModel) => {
            return <FieldString question={question} />;
        },
    });

• or adjust the CSS of the theme

I did try both approaches – changing CSS and creating custom widgets – both seem to be an overwhelming amount of work.

I don't know what is the best approach. I thought it would be nice to use the components from mui, so my form would respect changes to the theme. But then I would need to rebuild a lot of functions in my CustomWidget. Textfields are straight forwards and not an issue, but radiogroups for example would be a bigger thing to tackle. But on the other side reimplementing the CSS of mui, would also be a hustle since the structure of the HTML is probably different. (surveyjs and mui components are differently built I guess)

Does anyone has some experience or could give me his/her point of view? Anything is appreciated!

SurveyJS Creator v1.9.100 that has released this week has the Theme Editor. You can try it. It allows visually to customize all SurveyJS css variables. Probably you will be able to get the needed result by using SurveyJS css variables only.