Skip to content

Allow SelectionArea to receive style attributes and data- attributes #261

@kaorun343

Description

@kaorun343

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

  1. Styled-components (Current): Passing variables via transient props (e.g., $width), but this is not compatible with the move to zero-runtime CSS.
  2. 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.
  3. Data Attributes: Using data-* attributes to pass values, but the style attribute is the standard React/DOM convention for dynamic properties.

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions