英文:
Advice: CustomWidget or adjust CSS? Surveyjs with Next.js, Material UI v5 (custom theme)
问题
我很乐意给予一些建议。这是当前的情况：
- 使用自定义主题的 nextjs 应用程序和 material ui v5
- 这个主题在多个应用程序中都被使用，所以外观和感觉始终保持一致
- 我想通过创建者构建调查表单，并使用所有可用的功能
调查组件应该看起来像 mui 元素。我在文档中看到有两种可能的方法：
- 创建一个 CustomWidget，这个方法很好用，例如：
CustomWidgetCollection.Instance.add({
name: 'mui-text-field',
isFit: (question: QuestionTextModel) => question.getType() === 'text',
render: (question: QuestionTextModel) => {
return <FieldString question={question} />;
},
});
- 或者调整主题的 CSS
我尝试了这两种方法——改变 CSS 和创建自定义小部件——都似乎是一项繁重的工作。
我不知道哪种方法是最好的。我认为使用 mui 的组件会很好，这样我的表单就会遵循主题的变化。但是我需要在我的 CustomWidget 中重新构建很多功能。文本字段很简单，没有问题，但是例如单选组可能会更复杂一些。
但另一方面，重新实现 mui 的 CSS 也会很麻烦，因为 HTML 的结构可能不同。（我猜 surveyjs 和 mui 组件的构建方式不同）
| CSS | 自定义小部件 |
|---|---|
| 重新实现 mui 的 CSS | 需要重新实现 surveyjs 的功能 |
| 主题调整需要实现两次 | 需要大量的实现和测试时间 |
有人有经验或者可以给我他/她的观点吗？
任何意见都会受到赞赏！
英文:
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!
答案1
得分: 1
SurveyJS Creator v1.9.100在本周发布了主题编辑器。你可以试一试。它允许通过可视化方式自定义所有SurveyJS的CSS变量。可能你只需要使用SurveyJS的CSS变量就能得到所需的结果。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论