0

In react using css-modules i'm assigning classes to components like this

import styles from './styles.module.css'

const SomeComponent = () => (
  <ChildComponent className={styles.SomeClass + ' ' + styles.AnotherClass} />
)

or i can assign like this

<ChildComponent className={`${styles.SomeClass} ${styles.AnotherClass}` />

Would you suggest the way how to transform styles variable, that we could assign classes like this

<ChildComponent className={styles.SomeClass.AnotherClass.OneMoreClass />

And of course we could use one class or two or as much as possible

Dmitry Reutov
  • 2,995
  • 1
  • 5
  • 20
  • Plenty of discussion here: [How to add multiple classes to a ReactJS Component?](https://stackoverflow.com/questions/34521797/how-to-add-multiple-classes-to-a-reactjs-component) – pilchard Apr 02 '21 at 17:09
  • @plichard, cool! I scrolled half of these discussions - nothing like styles.SomeClass.AnotherClass.OneMoreClass, should i scroll further? Any chances? – Dmitry Reutov Apr 02 '21 at 17:13
  • You would need to define a custom class that mapped the properties of the `styles` object to accommodate chaining. Here is a quick example [sandbox](https://codesandbox.io/s/chained-properties-from-object-iuxrj), but I can't vouch for it as a solution. – pilchard Apr 02 '21 at 18:10
  • @pilchard, it is. Thank you. Some changes required because one style can be used in component for different components so for each property we need a distinct such object and then chaining can be started. Otherwise this is solution. And _end is not needed, better replace it with toString() – Dmitry Reutov Apr 02 '21 at 18:18
  • 1
    Yes, of course, `toString()` is a more elegant solution, edited the sandbox. Glad it helped. – pilchard Apr 02 '21 at 18:23

0 Answers0