Passthrough

How variant props are passed down to the styled element.

What is Passthrough?

Most of the time the variants you define will only be concerned with styling and the prop does not need to make it all the way down to the element being extended. For example, React will throw an error when a DOM element receives an unknown prop.

Given this, CSS Components by default will not pass variant values down to the element being styled by default.

However, there are times when you do indeed wish to pass a prop down to the element, either to be visible on the DOM, or to be used by a composed component. This is where passthrough comes in.

Example: readOnly input field.

In this example, we want to build an input field that should appear very differently if it is editable or not. We can do this by making the readOnly intrinsic attribute a variant.

Note below we are using the passthrough option to pass the readOnly prop down to the DOM element.

1const Input = styled("input", {
2  css: "input",
3  variants: {
4    readOnly: {
5      true: "disabled",
6    },
7  },
8  passthrough: ["readOnly"],
9});
10
11() => <Input type="text" value="Uneditable" readOnly />;
12