Styling components

Code components support standard React styling approaches, but with important considerations for Shadow DOM isolation.

How Shadow DOM affects styling

Code components render in Shadow DOM, which creates an isolated styling boundary. This means:

• Your component styles won’t affect the rest of the page
• Page styles won’t affect your component
• You need to explicitly connect to external styles

Rendering components in Shadow DOM prevents style conflicts to ensure your component looks and behaves as expected. However, this also means you need to explicitly connect to external styles like site variables, inherited properties, or tag selectors.

Adding styles to your code components

To ensure your code components are styled correctly, import your styles directly into your *.webflow.tsx file.

1
import { props } from '@webflow/data-types';
2
import { declareComponent } from '@webflow/react';
3
import { Button } from './Button';
4
import '../styles/globals.css'; // Import global styles

CSS capabilities

The following table shows which CSS features work within Shadow DOM:

Site variables

Reference a site’s variables in your components:

1
.button {
2
    color: var(--background-primary, #000);
3
  }

To get the exact variable name, click “Copy CSS” in the three-dot menu next to any variable in the Variables panel.

Inherited properties

CSS properties set to inherit work across Shadow DOM boundaries. Your component inherits styles from the parent HTML element:

1
.button {
2
    color: var(--background-primary, #000);
3
    font-family: inherit;
4
  }

For example, if your component is placed inside a <div> with font-family: sans-serif, setting font-family: inherit in your component will use sans-serif.

Tag selectors

Tag selectors (like h1, p, button) defined in your site’s CSS can be automatically applied to your component. Enable this with the applyTagSelectors option in your component declaration file.

1
import { declareComponent } from '@webflow/react';
2
import { Button } from './Button';
3
import '../styles/globals.css'; // Import global styles
4
5
export default declareComponent(Button, {
6
    name: 'Button',
7
    options: {
8
        applyTagSelectors: true,
9
    },
10
});

Advanced configuration

Code components support modern CSS frameworks and libraries, but some require specific configuration for Shadow DOM compatibility. For guidance on using CSS frameworks and component libraries with code components, see the frameworks and libraries guide.