0

I want to create a UI library using scss modules in NX workspace. I have a styling problem. I would like to have access to class names and their typing, however to get to a class I have to use square brackets. There is also no typing whatsoever, which is very annoying.

Currently, to get into a given class, I have to use such a syntax.

<div className={styles['container']}>

I would like it to work this way, and I would have a class hint.

<div className={styles.container}>

I will also add that when I created an application and not a lib, it works as expected. Has anyone had a similar problem?

hetious
  • 793
  • 1
  • 8
  • 14
  • Did you have a look at `typed-scss-modules` ? It can generates typings from CSS Modules. – Gabriel Pichot Nov 24 '22 at 12:43
  • I read about this but I don't want to workaround it in such way. It's strange because it's working fine on nx app – hetious Nov 24 '22 at 13:09
  • To convert `styles['container']` syntax to `styles.container` in Next.js see [Convert CSS module kebab-case class names to camelCase in Next.js](https://stackoverflow.com/questions/74038400/convert-css-module-kebab-case-class-names-to-camelcase-in-next-js). – juliomalves Dec 04 '22 at 11:44

0 Answers0