The ergonomics for this aren't ideal, and I plan on making tooling to make this experiense better.
If you're using third-party CSS such as Bootstrap or Tailwind, you'll need to move the CSS over
*.pc file. For example:
This must be converted to Paperclip like so:
@exportblock is necessary for CSS that you plan on using in other Paperclip files, since Paperclip requires explicity. You can make all selectors global with
:globalif you really want to, but I don't recommend that because you're losing safety in favor of convenience.
☝ Here's how you can use these styles in another Paperclip file:
The Tailwind example is a good place to start if you're looking to do this.
Styling third-party components
You may use classes defined in Paperclip on third-party components. Here's a simple example:
Then, in your JSX code:
☝ this works for many cases. However, it's a bit inconvenient since you'll be using the browser in order to debug your styles. To make things easier, you can copy & paste the third-party component's HTML & CSS directly in your PC file & open it up in VS Code to visually style it. Don't worry, this approach is only a guide to make custom styling easier. It's not for production.
Let's use a real example now. Here's a custom theme for the react select module:
Here's how we can apply this theme in React code:
That's all there is to it really.