Help migrating from styled-components

[altano]

It looks like there isn't a lot of syntactic sugar for the use case of defining a component with some basic styling, especially when it has children. So, for example, I want to have <Sentence>Hello</Sentence> and with styled-components:

const Sentence = styled.p`
  margin-bottom: 1rem;
`;

With panda-css I would use:

const Sentence = ({ children }: { children: React.ReactNode }) => (
  <styled.p marginBottom="1rem">{children}</styled.p>
);

Does that sound right? It would be great if there was something more analogous to styled that actually helped you define the component, something like:

import {styledComponent} from "./styled-system/css";

const Sentence = styledComponent.p({marginBottom: "1rem"});

This would make migrating from styled-components way easier

[segunadebayo]

Hey @altano,

We currently support this syntax.

const Sentence = styled("p", { base: { marginBottom: "1rem"  } })

You can also consider using the template literal syntax mode, which allows you to do this.

const Sentence = styled.p`
  margin-bottom: 1rem;
`;

[altano]

Neither of those allow you to have children, and most components have children, so I can’t use that syntax. Would it be possible to make it so that those versions did allow children?

[altano]

I can provide an example if that would be helpful, let me know

[altano]

Oh, wait, styled.p is not the component definition, but your example does work and allows children. So to summarize:

styled.p is a React.ReactNode (an instance of a component) but styled("p", ...) is a React.ComponentType (the actual component). perfect, thanks!