How do I access the responsive values in the style...

# javascript

[Hildebrandt Tobias]

How do I access the responsive values in the style properties? (https://mui.com/system/getting-started/usage/#responsive-values)
I tried the following and other stuff, but cannot seem to find out how:

sx {
    xs {
        paddingLeft = spacing(1)
    }
    paddingLeft {
        xs = spacing(1)
    }
}

[Hildebrandt Tobias]

It seems the example I looked up there is only for setting up the breakpoints.
But how do I set different styles for these breakpoints on a component?
So that I can say under 600px do this and over 600px do that?
In the MUI Showcase they do it with a mediaQuery and isMobile, but the
Toolbar Component for example sets paddingLeft to 24px in the @media(width:600px) style, but when I do

sx { paddingLeft = 8.px }

it's not overwritten there, just in the normal style of the Toolbar.

[Hildebrandt Tobias]

Illustrating the Problem:

[Hildebrandt Tobias]

This seems to work somewhat:

sx { breakpoints.up(<http://Breakpoint.sm|Breakpoint.sm>)) { paddingLeft = spacing(1) } }

[Hildebrandt Tobias]

Which seems to be the same as

sx { "@media(min-width:600px)" { paddingLeft = spacing(1) } }

or

media(MediaQuery((breakpoints.up(Breakpoint.sm)))) { paddingLeft = spacing(1) }

Is there a better/shorter way available? (if not I'll just make an extension function)

[turansky]

breakpoints.up(<http://Breakpoint.sm|Breakpoint.sm>)

Looks like return type of expression should be MediaQuery 😞

[Hildebrandt Tobias]

Just as a note, MediaQuery seems to just be a wrapped String.
And `breakpoints.up(Breakpoint.sm)`already returns @media (min-width: 600px)
the media function already adds a @media though, so

media(MediaQuery((breakpoints.up(<http://Breakpoint.sm|Breakpoint.sm>)))) { paddingLeft = spacing(1) }

actually doesn't work since it applies @media @media (min-width: 600px) .

[Hildebrandt Tobias]

For the time being I use helper functions like these:

context(Theme)
fun PropertiesBuilder.xs(
    block: PropertiesBuilder.() -> Unit
) = (breakpoints.up(<http://Breakpoint.sm|Breakpoint.sm>)) {
    block()
}

[Hildebrandt Tobias]

Resulting in this usage:

sx {
    xs { paddingLeft = spacing(2) }
    sm { paddingLeft = spacing(4) }
    xl { paddingLeft = spacing(6) }
}