Composing Components

Composing one CSS Components component into another.

CSS Components components can be composed via the styled function. In fact, CSS Components can style any React component that accepts a className prop.

1const BaseButton = styled("button", {
2  css: "baseButton",
3});
4
5const CheckoutButton = styled(BaseButton, {
6  css: "checkoutButton"",
7});
8
9() => (
10  <>
11    <BaseButton>Base button</BaseButton>
12    <CheckoutButton>Checkout button</CheckoutButton>
13  </>
14);
15

When you compose a component which has variants, they will be inherited.

1const BaseButton = styled("button", {
2  css: "baseButton",
3  variants: {
4    size: {
5      small: "smallButton",
6      large: "largeButton",
7    },
8  },
9});
10
11const CheckoutButton = styled(BaseButton, {
12  css: "checkoutButton",
13});
14
15() => (
16  <>
17    <BaseButton size="small">Base button</BaseButton>
18    <CheckoutButton size="small">Checkout button</CheckoutButton>
19    <BaseButton size="large">Base button</BaseButton>
20    <CheckoutButton size="large">Checkout button</CheckoutButton>
21  </>
22);
23