docs / styling
Styling
Keep mechanics, theme, and application styles independent.
Three styling paths
Most applications should import styles.css once. It combines the mechanical layer with a restrained, production-ready default theme.
import '@nipe-solutions/react-spring-bottom-sheet/styles.css'For a complete visual replacement, import core.css instead. Import theme.css when you want the default visual rules, or tokens.css when you only need their starting values.
Published stylesheets
| Hook | Purpose |
|---|---|
styles.css | Mechanics, default tokens, and default theme |
core.css | Positioning, gestures, portals, and safe-area handling only |
theme.css | Default visual rules; imports tokens.css |
tokens.css | Default values for the public custom properties |
Stable class hooks
| Hook | Purpose |
|---|---|
.rsbs-trigger / .rsbs-close | Opening and closing controls |
.rsbs-backdrop | Modal backdrop |
.rsbs-viewport | Fixed clipping and stacking layer |
.rsbs-content | Animated sheet surface |
.rsbs-handle | Drag handle and its hit area |
.rsbs-title / .rsbs-description | Accessible label and description |
Theme tokens
| Hook | Purpose |
|---|---|
--rsbs-z-index | Base stacking level |
--rsbs-backdrop-color / --rsbs-backdrop-opacity | Backdrop appearance |
--rsbs-content-background / --rsbs-content-color | Surface palette |
--rsbs-content-border / --rsbs-content-radius | Surface edge |
--rsbs-content-shadow | Surface elevation |
--rsbs-handle-color / --rsbs-handle-width / --rsbs-handle-height | Handle mark |
--rsbs-handle-hit-area | Minimum draggable handle area |
--rsbs-focus-color / --rsbs-focus-width / --rsbs-focus-offset | Keyboard focus indicator |
State is exposed through data-rsbs-state and data-rsbs-dragging. Treat --rsbs-position and safe-area variables as mechanical internals rather than theme inputs.
Complete replacement
The library owns the rsbs-* namespace. Give application hooks their own clear prefix, then combine one with a stable library hook—for example .checkout-sheet.rsbs-content. The core selectors have deliberately low specificity, so ordinary selectors win without !important.
import '@nipe-solutions/react-spring-bottom-sheet/core.css'
import './sheet-theme.css'
/* sheet-theme.css */
.checkout-sheet.rsbs-content {
background: var(--checkout-surface);
color: var(--checkout-text);
}Keep page-layout selectors out of sheet themes. The documentation site uses docs-*; its examples use rsbs-example-*. That boundary prevents either stylesheet from accidentally reaching into the other.
Compare the square-edged field-note theme with the explicit dark instrument theme. Both replace the complete visual layer while retaining the same component behavior.