Remove inline width style from divider to allow CSS-only styling

[tomkp]

Problem

The divider component applies an inline width: 1px (horizontal) or height: 1px (vertical) style. This makes it difficult to style the divider using CSS because inline styles have higher specificity than class selectors.

The documentation shows how to create an expanded hover area using CSS:

.split-pane-divider.horizontal {
  width: 11px;
  margin: 0 -5px;
  /* ... */
}

But this doesn't work because the inline width: 1px overrides the CSS width: 11px. Users have to resort to !important or pass dividerStyle={{ width: undefined }} to clear it.

Proposal

Remove the inline width/height from the divider. Let users style the divider entirely via CSS using the provided class names (split-pane-divider, horizontal, vertical, dragging).

Tradeoffs

Pros:

• The documented CSS approach works without workarounds
• More flexible - users have full control over styling
• Follows the pattern of unstyled/minimally-styled component libraries

Cons:

• Breaking change for users who rely on the default 1px divider without adding any CSS
• Users will need to add at least minimal CSS to see a divider (though most already do for cursor, hover effects, etc.)

Migration

Users who want the current default behavior would add:

.split-pane-divider.horizontal {
  width: 1px;
}

.split-pane-divider.vertical {
  height: 1px;
}

Alternatively, the library could provide an optional base stylesheet that users can import if they want sensible defaults.