CSS-in-JS

While the library is mainly class name based, we can use our old friend CSS-in-JS alongside the Template strings. This allows us to add CSS to the components.

Basic Styling

The interpolation system supports CSS with the style() function to add CSS in JS to the components. We are able to append this on every of the classmate "builders":

rc.{intrinsicElement}
rc.{intrinsicElement}.variants()
rc.extend()

export const CustomButton = rc.button`
  text-blue
  px-3
  py-2
  ${i => i.style({
    borderRadius: "10%",
    height: "calc(100% - 1rem)",
  })}
`

Implementation

<CustomButton>Click me</CustomButton>

// renders:
// <button class="text-blue px-3 py-2" style="border-radius: 10%; height: calc(100% - 1rem);">Click me</button>

Use Properties

Using properties as they can be extracted from the same entity (p)

const VariantButton = rc.button.variants<{ $size: "small" | "large"; $disabled?: boolean }>({
  base: (p) => `
    test-class
    color-black
    ${p.style({
      // we use the props in the style function
      border: p.$disabled ? "1px solid gray" : "1px solid blue",
      boxShadow: p.$disabled ? "none" : "0 0 0 1px black",
    })}
  `,
  variants: {
    $size: {
      small: (p) => p.style({ fontSize: "12px" }),
      large: (p) => p.style({ fontSize: "18px" }),
    },
  },
  defaultVariants: {
    $size: "small",
  },
})

Implementation

<VariantButton $disabled={false} $size="large">Variant Button</VariantButton>

// renders:
// <button class="test-class color-black" style="border: 1px solid blue; box-shadow: 0 0 0 1px black; font-size: 18px;">Variant Button</button>