Follow the ClassList example using import styles for styles.selected

[fringe geyser]

I were trying to follow this example:
https://www.solidjs.com/tutorial/bindings_classlist?solved
But myApp uses import styles from App.module.css and I do not know how to make it work with styles.selected

[lethal geyser]

Hi !
With css modules you import like that :
import styles from "./App.module.css"

You can use your class as a key like that : classList={{[styles.myStyle]: current() === 'foo'}}

[fringe geyser]

and how do I put else option ?

[lethal geyser]

in which part ?

[fringe geyser]

myStyle when its foo and myStyle2 when it is something else

hum setting class=mystyles works

[lethal geyser]

classList use an object, so you can add as much properties as you want.

In js, if you want a variable to be a key of an object, you have two way :

• myObject = {} followed by myObject[styles.myStyle] = 'val'
• all in once : myObject = { [styles.myStyle] : 'val'}

yes both solution are available, class & classList add a css class to the dom node

classList help if you want it conditionally

[fringe geyser]

I mean, I use class and classList to highlight it conditionally
but I read it somewhere I shouldn't use both class and classList ?

[lethal geyser]

yeah using both at the same time can be weird sometimes, I don't remember exactly what kind of weird behaviour

[fringe geyser]

{[styles.myStyle]:game.tabController==="zones", [styles.myStyle2]:true}

like this right ?