Skip to main content

Styling

Some common style changes can be made by setting CSS variables.

These include:

NameDefaultDescription
--focus-border#007fd4Color of the sash when hovered
--separator-borderrgba(128, 128, 128, 0.35)Color of the separator

For more involved styling you can target the component's child elements.

ClassDescription
.split-viewStyles applied to the top-level container
.split-view-horizontalStyles applied to the top-level container if `vertical={false}
.split-view-verticalStyles applied to the top-level container if `vertical={true}
.split-view-separator-borderStyles applied to the top-level container if `separator={true}
.sash-containerStyles applied to the sash container
.sashStyles applied to the sash
.sash-activeStyles applied to the sash if being dragged
.sash-disabledStyles applied to the sash if disabled
.sash-horizontalStyles applied to the sash if vertical={false}`.sash-hoverStyles applied to the sash if being hovered over.sash-macStyles applied to the sash if running under macos.sash-maximumStyles applied to the sash if the pane is maximised.sash-minimumStyles applied to the sash if the pane is minimised.sash-verticalStyles applied to the sash if vertical={true}`
.split-view-containerStyles applied to the split view container
.split-view-viewStyles applied to the split view view
.split-view-view-visibleStyles applied to the split view view if visible={true}