Search code examples
reactjsnode.jsthemessurveyjs

The method applyTheme dosen`t exist in surveyjs. How to change theme or css in a survey react nodejs


I’m trying to change the apperance of a survey in surveyjs forms library. According to document I have to use survey.applyTheme() but there are no such thing. I’ve imported the defaultV2.min.css

Please help me change the colors or set up a css or theme in surveyjs, react, nodejs. I hope this is enough information!

This is what i’ve done but the applyTheme is not there?!:

import { Model } from "survey-core";
 /*
   Don't forget to import or reference the         Default V2 style sheet
   as described in the Get Started with     SurveyJS article for your framework
 */
 import { LayeredDarkPanelless } "survey-core/themes/layered-dark-panelless";

const surveyJson = { ... };
const survey = new Model(surveyJson);
survey.applyTheme(LayeredDarkPanelless);```

Solution

  • I solved it this way:

    import * as Survey from "survey-react-ui";
    import { ComponentCollection } from "survey-core";
    import { Model } from "survey-core";
    import * as SurveyTheme from "survey-core/themes";
    import "survey-core/defaultV2.min.css";
    
    const [survey, setSurvey] = useState(null);
    
      useEffect(() => {
        const newSurvey = new Model(surveyJSON);
        newSurvey.applyTheme(SurveyTheme.DefaultDark);
        setSurvey(newSurvey);
        return () => {};
      }, [surveyJSON]);
    
     return (
        <>
          {surveyJSON && (
            <Survey.Survey
              model={survey}
              onComplete={handleOnComplete}
              onAfterRenderQuestion={handleAfterRenderQuestion}
              onCurrentPageChanged={handlePageChange}
            />
          )}
        </>
      );