> This page is for DevLink.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Styling and Theming

> How to override DevLink component styles using CSS scopes, global CSS imports, and advanced configuration.

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.

> **Never edit the generated files**
>
> Never edit the auto-generated React or CSS files.
> They will be overwritten on the next export.
> Always extend or override styles externally.

## 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:

**`app/layout.tsx`**

```tsx title="app/layout.tsx"
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:

```tsx
import { DEVLINK_SCOPE_CLASS } from "./devlinkScope";

export function Example() {
  return (
    <div
      className={DEVLINK_SCOPE_CLASS}
      style={{
        display: "contents",
      }}
    >
      <Section className="footer is-inverse" tag="footer">
        {/* ...contents */}
      </Section>
    </div>
  );
}
```

The constant is defined in the file `devlinkScope.ts`:

```ts
export const DEVLINK_SCOPE_CLASS =
  "wf-devlink-b16f5c24e5d95546d6d9e4a886d14864";
```

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

```css
@scope (.wf-devlink-b16f5c24e5d95546d6d9e4a886d14864) {
  .component-class {
    grid-column-gap: var(--_sizes---gap--sm-gap);
    grid-row-gap: var(--_sizes---gap--sm-gap);
  }
  ...
}
```

## 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:

**`CustomStyles.module.css`**

```tsx title="CustomStyles.module.css"
.fancyButton {
  border-radius: 8px;
  padding: 1rem 2rem;
}
```

**`Page.tsx`**

```tsx title="Page.tsx"
import overrides from "./CustomStyles.module.css";
import { Button } from "webflow/Button";

export function Page() {
  return <Button className={overrides.fancyButton}>Click me</Button>;
}
```

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](#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:**

**`ProductCard.tsx`**

```tsx title="ProductCard.tsx"
import { DEVLINK_SCOPE_CLASS } from "webflow/devlinkScope";

interface ProductCardProps {
  product: {
    id: string;
    name: string;
    price: number;
    image: string;
  };
  onAddToCart: (productId: string) => void;
}

export function ProductCard({ product, onAddToCart }: ProductCardProps) {
  return (
    <div
      className={DEVLINK_SCOPE_CLASS}
      style={{ display: "contents" }}
    >
      <div className="webflow-card">
        <img
          src={product.image}
          alt={product.name}
          className="webflow-card-image"
        />
        <div className="webflow-card-content">
          <h3 className="webflow-heading-small">{product.name}</h3>
          <p className="webflow-text-large">${product.price}</p>
          <button
            className="webflow-button-primary"
            onClick={() => onAddToCart(product.id)}
          >
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}
```

**`classes.css`**

```css title="classes.css"
@scope (.wf-devlink-b16f5c24e5d95546d6d9e4a886d14864) {
  .webflow-card {
    background-color: var(--color-neutral-100);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-medium);
  }

  .webflow-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius-small);
  }

  .webflow-card-content {
    margin-top: var(--spacing-small);
  }
}
```

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:

```css
/* Target elements with custom IDs */
[id*="ProductGrid_featured-section__"] {
  background-color: var(--color-accent);
  padding: var(--spacing-large);
}

/* Target elements with custom attributes */
[data-category="electronics"] {
  border: 2px solid var(--color-primary);
}

[data-product-count] {
  position: relative;
}
```

**`ProductGrid.tsx`**

```tsx title="ProductGrid.tsx"
import { Grid } from "webflow/Grid";
import styles from "./CustomStyles.module.css";

export function ProductGrid({ products, category }: ProductGridProps) {
  return (
    <Grid
      id="featured-section" // Custom ID for styling hooks
      data-category={category} // Custom attribute for conditional styling
      data-product-count={products.length}
      className={styles.productGrid}
    >
      {/* Grid content */}
    </Grid>
  );
}
```

### 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.

> **Don't do this**
>
> ```jsx
> // ❌ This breaks Webflow's generated CSS
> <Grid id={sectionId} />
> ```

> **Use custom attributes instead**
>
> ```jsx dashboard.jsx
> // ✅ Use custom attributes instead
> <Grid
>   data-section-id={sectionId}
> />
> ```

## 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:

**`Dashboard.tsx`**

```tsx title="Dashboard.tsx"
import styled from "styled-components";
import { Button } from "webflow/Button";

const DangerButton = styled(Button)`
  background-color: red;
  border-radius: 4px;
  color: white;
`;

<DangerButton>Delete</DangerButton>
```