styled-components creating css class inline in react or preact

Question

I used styled-components in a solidjs project before. There is a function named "css" in it that can create a class dynamically and assign it to a tag, the code is something like this

import { css } from "solid-styled-components";

and

<div class={ css`
   top: 0;
   left: 0;
`}>
   blah blah
</div>

can I use something like that in preact? I don't want to make a new component for that small div

Answer 1

I think the css prop is as close as you can get, docs for which can be found here.

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

You will need to use the Babel plugin for this though.

---

I used styled-components in a solidjs project before.

It's worth noting that solid-styled-components isn't actually styled-components -- it's a vaguely similar thing from the creator of Solid (rather than the styled-components team) and deviates from the API quite a bit. It's Solid's take on the Styled Components idea, not Solid bindings for Styled Components, if that makes sense.

You might have more luck with what you're after in another library besides styled-components itself.