Customization
Imperative Surface is intentionally small. You can customize the theme with CSS and customize the contents with normal React components.
Theme variables
:root {
--impr-surface-background-color: var(--color-background);
--impr-surface-foreground-color: var(--color-foreground);
--impr-surface-border-color: var(--color-border);
}Component classes
The layout components accept className:
<Surface.Content className="p-6">
...
</Surface.Content>For more control, provide your own header layout:
<Surface.Header>
<div className="my-custom-header">
<strong>Custom header</strong>
</div>
</Surface.Header>Styling the body
You can also style the component that you render as the surface body:
function MySurface({ pop }: SurfaceContext) {
return (
<Surface.Body className="my-surface">
...
</Surface.Body>
);
}Avoid depending on internal custom-element geometry unless you intentionally want to couple your application to the current stylesheet implementation.