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
--sash-hover-transition-duration0.1sLength of time hover transition animation should take to complete

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}