0

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)

CSS custom widget
reimplement mui css surveyjs functionality needs to be reimplemented
theme adjustments would need to be implemented twice would take a lot of implementation testing time

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

Henrik
  • 53
  • 6

1 Answers1

1

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.

Andrew Telnov
  • 161
  • 1
  • 3
  • Thank you for pointing this out! This is nice if you want the users to adjust the theme (which I don't want). I also already use a `themeJson` in my setup. But it does and certainly cannot support all Material UI offers. But from your answer, I understand that you are more leaning towards making the changes via CSS. – Henrik Jul 31 '23 at 07:24
  • 1
    We want to make examples with some customized themes. We want to make an example with a theme that will be similar to material design. However, it will take a while. – Andrew Telnov Jul 31 '23 at 15:14