-
-
Notifications
You must be signed in to change notification settings - Fork 160
Allow SelectionArea to receive style attributes and data- attributes #261
Description
Is your feature request related to a problem? Please describe.
I am currently migrating my codebase from styled-components to a zero-runtime CSS-in-JS library (such as Vanilla Extract or Linaria). In runtime-based CSS-in-JS, I could easily interpolate React props directly into the styles. However, zero-runtime libraries generate static CSS at build time, meaning any dynamic values (like user-defined widths or colors) must be passed via CSS variables through the style attribute.
Currently, SelectionArea only accepts className, which creates a bottleneck when trying to pass dynamic data from React state to the component's styles.
Describe the solution you'd like
I would like the SelectionArea component to accept a style prop of type React.CSSProperties. This prop should be spread onto the underlying container element rendered by the component. This allows for passing CSS variables like so:
<SelectionArea
style={{
'--selection-width': `${dynamicWidth}px`,
'--selection-bg': customColor
} as React.CSSProperties}
className={myStaticStyles}
>
{/* children */}
</SelectionArea>
Describe alternatives you've considered
- Styled-components (Current): Passing variables via transient props (e.g., $width), but this is not compatible with the move to zero-runtime CSS.
- Wrapper Divs: Wrapping the component in an extra div to carry the style attribute. This is suboptimal as it adds unnecessary DOM depth and can occasionally interfere with the library's internal coordinate calculations or event bubbling.
- Data Attributes: Using data-* attributes to pass values, but the style attribute is the standard React/DOM convention for dynamic properties.