如何在Ark UI React项目中通过CSS扩展Tabs列表区域空间

我正在使用Ark UI库开发React项目，当前处理Tabs组件。希望扩展带有data-scope=tabs data-part=list id=tabs::r1::list标识的区域，使其占用更多标题和按钮右侧的空白空间，以便自定义标题（尺寸、拉伸、边距）及Tab按钮的布局。

从截图可见，带有id='tabs::r1::list'的元素仅占用浅蓝色区域，右侧空白区域较大。我尝试调整该元素的width属性，以及修改display为inline-block，但前者无效，后者导致元素垂直布局错乱。我希望扩展浅蓝色区域以占用更多水平空间，减少右侧空白。

项目文件如下 #

package.json依赖项 #

"dependencies": {
  "@ark-ui/react": "^1.1.0",
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},

TabsComponent.jsx #

import React from 'react';
import { Tabs } from '@ark-ui/react';
import './TabsComponent.css';

const TabsComponent = () => {
    return(
        <Tabs.Root>
            <Tabs.List>
                <div id="title">Ark UI</div>
                <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
                <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>  
                <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>  
            </Tabs.List>
            <Tabs.Content value="tab1">This is tab 1!</Tabs.Content>
            <Tabs.Content value="tab2">This is tab 2!</Tabs.Content>
            <Tabs.Content value="tab3">This is tab 3!</Tabs.Content>
        </Tabs.Root>
    );
};

export default TabsComponent;

TabsComponent.css #

[data-scope='tabs'][data-part='list'] { /*Header*/
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: medium;
    text-align: center;
    align-items: center;
    color: #ffffff;
    width: 100%;
    /* or adjust it here */
    
  }

  [data-scope='tabs'][data-part='list'][id='tabs::r1::list'] {
    height: 100%;
    /* adjust width to use more whitespace here*/
  }

  [data-scope='tabs'][data-part='trigger'] { /*Buttons*/
    display: inline-block;
    padding: 16px;
    color: #ffffff;
    background-color: #AD5705;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

[data-scope='tabs'][data-part='content'] {
  color: white;
  background-color: rgb(37, 37, 37);
}

#title {
  font-size: 28px;
}

解决方案 #

问题核心在于Tabs.List的父容器或自身布局未充分利用水平空间，按以下步骤修改即可解决：

1. 让Tabs根容器占满宽度
   给Tabs.Root添加样式，确保它不受父容器宽度限制：

[data-scope='tabs'][data-part='root'] {
  width: 100%;
}

2. 优化Tabs.List的flex布局
   移除动态ID选择器（ID会随组件实例变化，通用性差），调整flex属性让元素合理分配空间：

[data-scope='tabs'][data-part='list'] {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 500; /* 替换不合法的"medium"值 */
    align-items: center;
    color: #ffffff;
    width: 100%;
    gap: 16px; /* 元素间添加间距 */
    justify-content: space-between; /* 标题靠左，Tab按钮靠右 */
}

3. 让标题拉伸占用空白
   给标题添加flex-grow属性，使其自动填充剩余水平空间：

#title {
  font-size: 28px;
  flex-grow: 1;
}

修改后的完整CSS #

[data-scope='tabs'][data-part='root'] {
  width: 100%;
}

[data-scope='tabs'][data-part='list'] {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 500;
    align-items: center;
    color: #ffffff;
    width: 100%;
    gap: 16px;
    justify-content: space-between;
}

[data-scope='tabs'][data-part='trigger'] {
    padding: 16px;
    color: #ffffff;
    background-color: #AD5705;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

[data-scope='tabs'][data-part='content'] {
  color: white;
  background-color: rgb(37, 37, 37);
}

#title {
  font-size: 28px;
  flex-grow: 1;
}

修改后Tabs.List会完全占满水平空间，右侧空白会被标题或按钮布局合理利用，你还可以根据需求调整justify-content（如flex-start、center）和flex-grow参数，实现不同的布局效果。

内容的提问来源于stack exchange，提问作者L W