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

# Styling

How to apply your own CSS to mounted SDK screens and components.

---

## Background

Solvimon components render inside [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). CSS from the host page cannot reach into that shadow DOM, so a stylesheet on your page has no effect on SDK output. To style SDK content, pass your overrides through the SDK configuration instead.

## How it works

Pass a `cssOverrides` value to `createSolvimonCore`. The SDK injects those rules into each mounted instance's shadow root as a `<style data-solvimon-css-overrides>` element, so they apply everywhere you mount a screen or component.

`cssOverrides` restyles the appearance of existing elements. It can't add, remove, or reorder them, and it can't change layout structure.

Write your overrides as plain CSS targeting the public `sv-*` classes, then pass that string as the `cssOverrides` option:

**`Pass cssOverrides to the core`**

```js Pass cssOverrides to the core
import { createSolvimonCore } from '@solvimon/solvimon-web/core';

const overrideStyles = `
    .sv-root {
        font-family: 'Avenir Next', Avenir, sans-serif;
    }

    .sv-checkout__submit {
        background: #16a34a !important;
        color: #ffffff !important;
        border-radius: 999px !important;
    }

    .sv-order-summary {
        background: #f0fdf4;
        border: 2px solid #16a34a;
        border-radius: 16px;
        padding: 16px;
    }
`;

const solvimon = createSolvimonCore({
    environment: 'TEST',
    locale: 'en-US',
    cssOverrides: overrideStyles,
});
```

Those overrides change the font, restyle the checkout submit button, and reframe the order summary:

![Checkout order summary with default styling](/_fern-img/66bd82151c2f9039438d021a6e65b62103c05172b4666ca6439df8521eb38af1.webp)

Default

![Checkout order summary restyled with cssOverrides](/_fern-img/45c7545df7f030cf623fe1932bc0474345e5eeb9257f90f3ddd780a638e397da.webp)

With cssOverrides

Your rules land in a `<style data-solvimon-css-overrides>` element inside each shadow root. If an override isn't taking effect, that's the first place to look in devtools: expand the SDK element's shadow root and confirm your CSS is present and well-formed.

`cssOverrides` also accepts an array of CSS strings, which the SDK joins automatically.

### `!important`

The SDK's styles come from Tailwind utility classes set directly on the elements. When one of those already sets a property you're overriding, your rule loses the cascade and has no effect; `!important` makes it win.

Rather than work out in advance which properties Tailwind already sets, let devtools tell you. Write the rule without `!important`, inspect the element, and add `!important` only to the properties that show up struck through. In the example above, the button needs it (Tailwind sets its background, text color, and radius); the order summary doesn't.

## Styling hooks

Target the public `sv-*` classes. Do not rely on internal Tailwind utility classes; they are implementation details and can change between releases.

All `sv-*` classes are part of the public styling surface and are stable across releases. If a class exists in the shadow root and starts with `sv-`, you can target it. The table below lists the common hooks; any additional `sv-*` classes you find in DevTools carry the same stability guarantee.

For example, the checkout screen maps to these hooks:

![Checkout screen annotated with its sv-\* styling hooks](/_fern-img/72c1dda6e8d2476e7b9c8273731da9aef266c9675d4c0327016ce7d4501206bd.webp)

| Hook                                    | Description                                                            |
| --------------------------------------- | ---------------------------------------------------------------------- |
| `.sv-root`                              | Root element for a mounted SDK screen or component.                    |
| `.sv-screen`                            | Full-screen SDK entries, such as checkout or customer overview.        |
| `.sv-component`                         | Standalone SDK component entries, such as invoices or payment methods. |
| `.sv-action`                            | SDK action buttons.                                                    |
| `.sv-loading`                           | Loading state wrapper.                                                 |
| `.sv-error`                             | Error state wrapper.                                                   |
| `.sv-checkout`                          | Checkout screen root.                                                  |
| `.sv-checkout__plan-customization`      | Plan customization block on the checkout.                              |
| `.sv-checkout__express-payment-methods` | Express payment buttons (such as Apple Pay) on the checkout.           |
| `.sv-checkout__customer-form`           | Customer information form on the checkout.                             |
| `.sv-checkout__payment-methods`         | Payment method selection block on the checkout.                        |
| `.sv-checkout__order-summary`           | Order summary panel on the checkout.                                   |
| `.sv-checkout__promotion-code`          | Promotion code field on the checkout.                                  |
| `.sv-checkout__submit`                  | Checkout submit button.                                                |
| `.sv-order-summary`                     | Order summary block.                                                   |
| `.sv-payment-methods`                   | Payment methods component root.                                        |
| `.sv-payment-method-form`               | Payment method form component root.                                    |

This table lists the common hooks, not every class. To find additional hooks, open your browser devtools and inspect the rendered SDK content inside its shadow root; any `sv-*` class is a valid target.

Classes follow a [BEM](https://getbem.com/) naming convention: `sv-block__element--modifier`. Modifiers let you target specific states and variants, such as `.sv-checkout--paid`, `.sv-error`, or `.sv-action--primary`. Only the `sv-*` classes are part of the public styling surface; treat anything else you see in the shadow root as internal.

> **Note**
>
> For brand colours, prefer the `branding.colors` options on [Core](/sdk/core). Use `cssOverrides` for finer-grained styling that those options don't cover.

---