Inline or External Css in Paste

[ehsaan-changa]

Hey ,

My question is that why we cannot write (External , Inline) CSS for Paste components . All i can see is that We can do it only for Box component.
Am i missing something or its not recommended to do that ??

[dosubot[bot]]

🤖

Hi @ehsaan-changa! 👋

I'm Dosu, a friendly bot here to lend a hand with your Paste queries while we wait for a human maintainer to join us. I'm all ears to answer your questions, guide you through bugs, and help you become a contributor! 😊

The design choice in Paste to allow CSS customization only for the Box component is intentional and not a limitation. The Box component is a primitive, a foundational element in the design system, designed to be flexible and customizable. This is why it can accept any valid CSS as a prop.

Other components in Paste are higher-level, built using these primitives, and are meant to be used as-is to maintain consistency across the design system. These components have predefined styles and behaviors, and allowing external or inline CSS on these components could lead to inconsistencies in the design system.

Here's an example of how the Box component can be customized with different CSS properties:

<Box
  backgroundColor={backgroudColorValue}
  borderRadius={borderRadiusValue}
  borderColor={borderColorValue}
  height={heightValue}
  margin={marginValue}
  padding={paddingValue}
>
  <Text as="p" color="colorText">
    {demoString}
  </Text>
</Box>

This level of customization is not available in other higher-level components in Paste.

This design choice is part of Paste's commitment to providing a robust and accessible design system. As mentioned in a previous discussion, allowing uncontrolled customization could lead to design fragmentation and impact the ability of the Design System team to evolve the system without adversely affecting downstream consumers.

I hope this clarifies your question. If you have any further questions, feel free to ask.

Sources

• best practice of using custom styles / classNames on paste components
• packages/paste-core/primitives/box/stories/index.stories.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[nkrantz]

Hey @ehsaan-changa - just want to add to dosubot's answer that if you're a Twilio customer building your own app/plugin with Paste (or not a Twilio employee), we also offer the Customization Provider which allows additional styling of all Paste components. The Customization Provider is not meant to be used for Twilio products, but instead offers external Paste users a chance to fully customize the look and feel of the design system to their liking. If you're an external Paste user, feel free to play around with Remix, our theme designer (beta), to create a theme, and then pass that custom theme to the Customization Provider in your application.