Styling and Theming

DevLink exports your Webflow styles as CSS, giving you full control over how components look in your React application. You can maintain design consistency while adding custom theming, responsive behavior, and component variants.

The generated CSS uses CSS @scope so styles only apply within DevLink components and don’t leak into the rest of your app, and CSS @layer to keep the generated rules at lower precedence than the styles you set in your own CSS files.

Global CSS setup

DevLink generates a global.css file that imports base styles, responsive breakpoints, and CSS variables in the generated code. Import it once at your app’s root to apply Webflow’s design system globally:

1
import "webflow/css/global.css";

By default (with the cssScopes setting enabled), the exported styles are scoped to a class via a constant named DEVLINK_SCOPE_CLASS. To apply the scope, each exported component is wrapped in a <div> with that class, as in this example:

1
import { DEVLINK_SCOPE_CLASS } from "./devlinkScope";
2
3
export function Example({ as: _Component = Section }: ExampleProps) {
4
  return (
5
    <div
6
      className={DEVLINK_SCOPE_CLASS}
7
      style={{
8
        display: "contents",
9
      }}
10
    >
11
      <_Component className="footer is-inverse" tag="footer">
12
        {/* ...contents */}
13
      </_Component>
14
    </div>
15
  );
16
}

The constant is defined in the file devlinkScope.ts:

1
export const DEVLINK_SCOPE_CLASS =
2
  "wf-devlink-b16f5c24e5d95546d6d9e4a886d14864";

The generated CSS files are limited to that scope, as in this example:

1
@scope (.wf-devlink-b16f5c24e5d95546d6d9e4a886d14864) {
2
  .component-class {
3
    grid-column-gap: var(--_sizes---gap--sm-gap);
4
    grid-row-gap: var(--_sizes---gap--sm-gap);
5
  }
6
  ...
7
}

Overriding CSS

The safest way to customize exported components is to attach your own CSS classes via the className prop. This approach preserves Webflow’s original styles while adding your customizations:

1
.fancyButton {
2
  border-radius: 8px;
3
  padding: 1rem 2rem;
4
}

Exported components already wrap their root in the DEVLINK_SCOPE_CLASS div, so you don’t need to wrap them again at the call site unless you’re styling a custom component that re-uses Webflow classes (see Reuse Webflow classes and variables below).

Reuse Webflow classes and variables

DevLink exports your Webflow project’s class names and CSS variables, enabling you to build custom components that match your design system. This approach is ideal for components with dynamic data or complex interactions that you wouldn’t build in Webflow:

Custom-built React component:

1
import { DEVLINK_SCOPE_CLASS } from "webflow/devlinkScope";
2
3
interface ProductCardProps {
4
  product: {
5
    id: string;
6
    name: string;
7
    price: number;
8
    image: string;
9
  };
10
  onAddToCart: (productId: string) => void;
11
}
12
13
export function ProductCard({ product, onAddToCart }: ProductCardProps) {
14
  return (
15
    <div
16
      className={DEVLINK_SCOPE_CLASS}
17
      style={{ display: "contents" }}
18
    >
19
      <div className="webflow-card">
20
        <img
21
          src={product.image}
22
          alt={product.name}
23
          className="webflow-card-image"
24
        />
25
        <div className="webflow-card-content">
26
          <h3 className="webflow-heading-small">{product.name}</h3>
27
          <p className="webflow-text-large">${product.price}</p>
28
          <button
29
            className="webflow-button-primary"
30
            onClick={() => onAddToCart(product.id)}
31
          >
32
            Add to Cart
33
          </button>
34
        </div>
35
      </div>
36
    </div>
37
  );
38
}

Additionally, you can reuse component classes from your Webflow project in your custom-built React components by wrapping your custom components with the container wrapper and using Webflow’s style blocks.

Custom Identifiers

DevLink automatically transforms custom IDs into safe, namespaced selectors using CSS’s @scope and @layer rules, preventing style conflicts when components are used in larger React apps.

Custom IDs are transformed into the following format:

<ComponentName>_<custom-id>__<unique-identifier>

For example, a custom ID of featured-section on a Grid element within a Hero component may become: Hero_featured-section__abc123

Use attribute selectors with wildcards to style elements reliably:

1
/* Target elements with custom IDs */
2
[id*="ProductGrid_featured-section__"] {
3
  background-color: var(--color-accent);
4
  padding: var(--spacing-large);
5
}
6
7
/* Target elements with custom attributes */
8
[data-category="electronics"] {
9
  border: 2px solid var(--color-primary);
10
}
11
12
[data-product-count] {
13
  position: relative;
14
}

Avoid dynamic IDs

Some Webflow elements (like Grid or Quick Stack) rely on fixed IDs for CSS. If you replace them dynamically in React, the exported CSS will no longer apply. Instead, use custom attributes to keep Webflow’s styling intact while allowing you to attach your own identifier.

1
// ❌ This breaks Webflow's generated CSS
2
<Grid id={sectionId} />

1
// ✅ Use custom attributes instead
2
<Grid
3
  data-section-id={sectionId}
4
/>

CSS-in-JS integration

If your project uses styled-components or emotion, you can wrap DevLink components with styled overrides. This approach works well for component variants and theme-based styling:

1
import styled from "styled-components";
2
import { Button } from "webflow/Button";
3
4
const DangerButton = styled(Button)`
5
  background-color: red;
6
  border-radius: 4px;
7
  color: white;
8
`;
9
10
<DangerButton>Delete</DangerButton>