如何在我的 ark-ui React 项目中通过 css 启用更多空白？

Question

我正在使用 ark-ui 库创建一个 React 项目，并且我目前正在使用它们的 tabs 组件。

我正在尝试扩展名为

data-scope=tabs data-part=list id=tabs::r1::list

的区域以占用更多空白，如标题右侧和所附图像中的按钮所示。

我想这样做，这样我就可以按照我想要的方式放置我的标题（大小、拉伸和边距）以及后续选项卡按钮。

以下是我的项目文件

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;
}

从图中可以看到带有

id='tabs::r1::list

的元素只占据了浅蓝色区域，空白更加丰富

我尝试过调整

[data-scope='tabs'][data-part='list']

宽度和

[data-scope='tabs'][data-part='list'][id='tabs::r1::list']

宽度，但都不起作用。

我尝试将两者的显示调整为

inline-block

，但这会导致元素以错误的方式垂直放置。

我想简单地扩展浅蓝色区域以占用更多的水平空间，因此空白（紫色、虚线区域）更少。

Answer 1

已解决

制作了

[data-scope='tabs'][data-part='list'][id='tabs::r1::list']

display: flex

并将

margin

添加到标题