Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Style Overrides
The `styleOverrides` configuration within a preset item defines per-preset style values that vary across breakpoints, with optional state support. Use `styleOverrides` to override CSS property values for the root element and inner elements at different breakpoints.

## Breakpoint preset style overrides

The top-level `styleOverrides` object maps breakpoints to their style override configurations.

<PropertyList bordered>
  <Property
    name="default"
    type="PresetStyleOverrides"
    description="Style overrides for the default breakpoint. These cascade to all other breakpoints."
  >
    <ExpandableSection name="PresetStyleOverrides properties">
      <PropertyList>
        <Property
          name="style"
          type="map<string, PresetStyleItemOverrides>"
          description="Style overrides for the root element. Each key is a CSS property or CSS custom property key."
        >
          <ExpandableSection name="PresetStyleItemOverrides properties">
            <PropertyList>
              <Property
                name="value"
                type="Value"
                description="The override value for this style item."
              />
              <Property
                name="statesValues"
                type="map<string, Value>"
                description="Override values for specific states. Each key is a state key defined in the element's states map."
              />
            </PropertyList>
          </ExpandableSection>
        </Property>
        <Property
          name="elements"
          type="map<string, ElementStyleOverrides>"
          description="Style overrides for inner elements. Each key is an element key."
        >
          <ExpandableSection name="ElementStyleOverrides properties">
            <PropertyList>
              <Property
                name="presetKey"
                type="string"
                description="The override preset key for this element. Maximum 100 characters."
              />
              <Property
                name="style"
                type="map<string, PresetStyleItemOverrides>"
                description="Style overrides for this element."
              />
              <Property
                name="elements"
                type="map<string, ElementStyleOverrides>"
                description="Style overrides for further nested inner elements."
              />
            </PropertyList>
          </ExpandableSection>
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="small"
    type="PresetStyleOverrides"
    description="Style overrides specifically for the small (mobile) breakpoint."
  />
</PropertyList>

## Examples

The following overrides background color with state-specific hover values at the default breakpoint, and adjusts font size for mobile.

```typescript
editorElement: {
  presets: {
    myPreset: {
      styleOverrides: {
        default: {
          style: {
            backgroundColor: {
              value: '#ffffff',
              statesValues: {
                hover: '#f0f0f0',
              },
            },
            fontSize: {
              value: '16px',
            },
          },
          elements: {
            menuItem: {
              style: {
                padding: {
                  value: '12px 16px',
                },
              },
            },
          },
        },
        small: {
          style: {
            fontSize: {
              value: '14px',
            },
          },
          elements: {
            menuItem: {
              style: {
                padding: {
                  value: '8px 12px',
                },
              },
            },
          },
        },
      },
    },
  },
}
```

## See also

- [Presets](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/presets)