Layout styling on Card component

[yunuscanemre]

hi folks, is there a good way to set styles on the Card component to alter its default layout behaviour. I'm trying to create a card like this where the content isn't naturally wide enough to create this width. But if I try to set styles like <Card style={{ width: "100%" }}> etc the Card component seems to explicitly ignore it (i think due to this code ). Is there any way to control the styling of the underlying component.

[TheSisb]

Hi @yunuscanemre,

In Paste, we don't style with inline CSS or stylesheets. Instead, we use a CSS-in-JS approach where we apply styles as props to components directly. There are several advantages: we can typecheck and provide guardrails to styles on our components, which in turn allows us to evolve the designs over time without any breaking changes.

The base component you can apply any style to is called Box. Here's a codesandbox demo that shows how you can compose a Box with a Card to set a maxWidth.

Hope this helps!

[SiTaggart]

Further to this, in Paste we treat layout as a separate concern to that of the Component. A Card should be concerned only with being a Card, and have nothing to do with what is inside of it.

To lay components out on the screen, you create a layout using our layout components or Styling primitives, and then place the components you want to layout, into the layout component you just used.

As an example, I created a very simple demo

https://codesandbox.io/s/creating-layouts-example-tuiu5u

[yunuscanemre]

In Paste, we don't style with inline CSS or stylesheets. Instead, we use a CSS-in-JS approach where we apply styles as props to components directly. There are several advantages: we can typecheck and provide guardrails to styles on our components, which in turn allows us to evolve the designs over time without any breaking changes.

Awesome, that makes lot of sense and thank you for the example. It made me realize how i can fix my issue.

If Card is inside a Box which is display: flex then it doesn't do width 100%. Can get around it by inserting another Box between the flex Box and the Card.

Is there a reason we Card doesn't support CSS-in-JS prop like flex so we can use it as a flex item ?

Here is what i mean: https://codesandbox.io/s/interesting-dewdney-92n0mk?file=/src/index.tsx

[yunuscanemre]

As an example, I created a very simple demo

Awesome ! This is pretty much exactly what I ended up doing. Thank you !

[SiTaggart]

Is there a reason we Card doesn't support CSS-in-JS prop like flex so we can use it as a flex item?

Yes, a couple of reasons.

1. It isn't it's job to be a layout or create one, it has no right controlling how stuff around it, or in it renders on the page
2. With that constraint, we can safely, always, push changes to Card knowing that we won't break someones layout unintentionally. It's basically for protection and safety.

[yunuscanemre]

thanks for the explanation @SiTaggart . Cheers.