Hello again :slightly_smiling_face: some of the ex...

# javascript

[thana]

Hello again 🙂
some of the examples from https://mui.com/material-ui/react-drawer/ only work, because they directly manipulate some of the css classes like so:

<Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
          },
        }}

How would i add these stylings to the MuiDrawer-paper class the kotlin way?

[turansky]

sx {
    MuiDrawer.paper {
       width = drawerWidth 
    }
}

[thana]

Thank you! it still feels quite uncomfortably to me to handle css in kotlin/js... is it just me?

[turansky]

Do mean conctrete “uncomfortable” use cases?

[thana]

@turansky what i am missing is an api that leans towards leading me into the right direction... i think. Take my above question as an example. there is no way the api tells me that i could have a look at some magic constant the framework declares.
Then there is no obvious way how i could reproduce the examples i find when googling my problems in kotlin-js. e.g. i still don't know how i could express the css selector '& .MuiDrawer-paper' (mind the &). i mean MAYBE kotlin/js already reners this selector when i use the code snippet you posted as an answer, but i cant find that out.

Another instance: i couldn't find any documentation about how i can declare arbitrary css classes using kotlin/js and register it somewhere. i googled it and ended up here https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-css/README.md
And it writes After constructing a stylesheet you can serialize it into a string and do with it as you please: . reading this i kinda feel pranked because its the do with it as you please: is exactly the part i was looking for

[thana]

but i admit: i really have no clue about writing html and css. i usually write backend code only. so maybe a real web developer would never ask those questions and think kotlin.js feels very natural