API Reference
cssInterop
Teach third-party components to understand className props.
cssInterop
cssInterop wraps a component and maps className props to style props or native props.
import { cssInterop } from '@nitrofoundation/nitrowind';
const StyledSheet = cssInterop(BottomSheet, {
handleClassName: 'handleStyle',
backgroundClassName: 'backgroundStyle',
});The shorthand form maps source className props to target props.
<StyledSheet handleClassName="bg-zinc-400" backgroundClassName="bg-white dark:bg-zinc-950" />Advanced mapping
Use the advanced form when you need one resolved style property:
const StyledIcon = cssInterop(Icon, {
props: {
color: { fromClassName: 'className', styleProperty: 'color' },
},
});Explicit props win over generated props.
withNitroCss is the lower-level wrapper behind cssInterop.
Common presets
Nitrowind exports dependency-free mappings for common component shapes:
import { cssInterop, cssInteropPresets } from '@nitrofoundation/nitrowind';
const StyledList = cssInterop(ThirdPartyList, cssInteropPresets.scrollable);
const StyledSheet = cssInterop(BottomSheet, cssInteropPresets.bottomSheet);
const StyledIcon = cssInterop(Icon, cssInteropPresets.icon);Available presets are safeArea, scrollable, bottomSheet, icon, and
navigation. Explicit mappings and automatically inferred *ClassName props
can be used together; user-supplied target props always win.