DEV Community

Discussion on: Switching Themes in a React App with Ant Design

Collapse
 
nring profile image
Nat Ring • Edited

Thanks for the detailed background info on this! I'm currently in the process of adapting this approach for a Next.js app with varying levels of success. I was wondering if you found that you needed to use PostCSS to namespace the stylesheets rather than just wrap the individual theme files like so:

.theme-light {
  @import '~antd/lib/style/themes/default.less';
  @import '~antd/dist/antd.less';

  @body-background: #FAFAFA;
}
Enter fullscreen mode Exit fullscreen mode

I haven't had 100% success with the latter approach, but jerry-rigging PostCSS into an already jerry-rigged Less config for Next.js hasn't been the most straightforward thing to do.

Collapse
 
chrsi profile image
Christian Siber

I just updated the post. Thanks again :)

Collapse
 
chrsi profile image
Christian Siber

Hey, thanks for the heads-up! Somehow I haven't thought about the nesting capabilities of less... But yes that should work and would be way better than using another webpack plugin 😅
I'll try it on the weekend and might update the post accordingly