feat: Split Button supports deep nested Button (#1741)

Co-authored-by: pointhalo <[email protected]>

packages/semi-foundation/button/splitButtonGroup.scss

@@ -10,19 +10,20 @@ $icon: #{$module}-with-icon;
     .#{$module} {
         border-radius: 0;
         margin-right: 1px;
-    }
 
-    :first-child {
-        border-top-left-radius: var(--semi-border-radius-small);
-        border-bottom-left-radius: var(--semi-border-radius-small);
-    }
+        &-first {
+            border-top-left-radius: var(--semi-border-radius-small);
+            border-bottom-left-radius: var(--semi-border-radius-small);
+        }
 
-    :last-child {
-        border-top-right-radius: var(--semi-border-radius-small);
-        border-bottom-right-radius: var(--semi-border-radius-small);
-        margin-right: unset;
+        &-last {
+            border-top-right-radius: var(--semi-border-radius-small);
+            border-bottom-right-radius: var(--semi-border-radius-small);
+            margin-right: unset;
+        }
     }
 
+
     &:hover {
         // 因为上面那条规则，导致原来的active被覆盖
         .#{$module}-borderless:active {

packages/semi-ui/button/splitButtonGroup.tsx

@@ -12,16 +12,31 @@ export interface SplitButtonGroupProps extends BaseProps {
 }
 
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
+
+    containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+
     static propTypes = {
         style: PropTypes.object,
         className: PropTypes.string,
         'aria-label': PropTypes.string,
     };
+
+    componentDidMount() { 
+        if (this.containerRef.current) {
+            const buttons = this.containerRef.current.querySelectorAll('button');
+            const firstButton = buttons[0];
+            const lastButton = buttons[buttons.length - 1];
+            firstButton?.classList.add(`${prefixCls}-first`);
+            lastButton?.classList.add(`${prefixCls}-last`);
+        }
+    }
+
     render() {
         const { children, style, className } = this.props;
         const cls = classNames(`${prefixCls}-split`, className);
         return (
-            <div className={cls} style={style} role="group" aria-label={this.props['aria-label']}>
+            <div ref={this.containerRef} className={cls} style={style} role="group"
+                aria-label={this.props['aria-label']}>
                 {children}
             </div>
         );