> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Style Overrides

## Article: Style Overrides

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/style-overrides.md

## Article Content:

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](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/presets.md)