[docs] confusion between using css property names and JSON style property names

[JonCognioDigital]

Related page

https://mui.com/blog/introducing-pigment-css/?ck_subscriber_id=887769670

Kind of issue

Unclear explanations

Issue description

I understand this is about a blog article, not technically documentation but reading abut pigment for the first time it's confused me.

https://mui.com/blog/introducing-pigment-css/?ck_subscriber_id=887769670

The blog article shows code written with "proper" css as the input, e.g. &:hover { border-color: blue; }. I was delighted because I've been desperately searching for an RSC compatible css-in-jss solution that allows you to write proper CSS as all the other solutions seem to require JSON style css declarations. My hopes seem to have been dashed when reading the actualdocumentation as they appear to have everything in JSON. Just to be clear, which is it?

Context

No response

Search keywords: css snake case

[oskari]

After giving it a spin it seems that template literals do work just fine, despite not mentioned on the documentation (Which is probably just work-in-progress at this stage).
eg:

const Foo = styled.div`
  color: orange;
`

But I don't see a way to use the "Styling based on props" -features while doing that.

[brijeshb42]

As stated by @oskari, we support both but the object syntax has more flexibility in allowing us to write variants which is not possible through the css syntax. But this mainly concerns libraries and generic components. You can use one or the other based on your requirements.