Change FlexGrid theme at runtime in React

Change FlexGrid theme at runtime in React

Posted by: scott.chinn on 9 January 2020, 8:27 am EST

• 

  scott.chinn

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 8:27 am EST

  Hello. We need to change the FlexGrid theme at runtime. We are using React with Create React App, which uses css-in-js to pull the css files out of npm at build time. Ideally we could import both themes and then switch between them by setting something in FlexGrid.

  import ‘@grapecity/wijmo.styles/themes/wijmo.theme.dark.css’;
  
  import ‘@grapecity/wijmo.styles/wijmo.css’;

  However, it appears that Wijmo themes are not name-spaced, right? So 2nd css file imported will always win and we have no way to change themes at runtime.

  Do you have any other solutions for this?

  Thanks!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 9:57 pm EST

  Hi Scott,

  If you wish to dynamically add and remove the theme’s CSS file, I would suggest you add the CSS using CDN links instead of importing it using CSS loader. If you are using CDN links, you can easily remove the link and add the CDN link for another theme. Please refer to the sample attached for reference.

  Regards,
  
  Ashwin

  dynamic themes.zip

• 

  scott.chinn

  • Post Options:
  • Link
    Copy

  Posted 10 January 2020, 1:08 am EST

  OK. Thanks. We can’t use a CDN because we are commercial product that gets installed at customer sites and everything needs to be local. I think we can just adjust our build process so the two css files get installed in a static location that our app can access.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 January 2020, 2:20 pm EST

  Hi Scott,

  You can ship all the themes file along with the application and instead of using the CDN link, you can provide the path to these local files in your application and change them dynamically using the solution provided above.

  ~regards