如何在Chakra UI中批量设置局部Tab组件的字体大小

我正在使用Chakra UI搭建一个包含标签页（Tabs）的简单网站，但困惑于如何批量修改部分Tab组件的字体大小。

目前我只能为每个Tab组件单独设置字体大小，代码如下：

<Tabs>
    <TabList> {/* These are redundant... */}
        <Tab fontSize={{base: "5px", sm: "10px", md: "15px"}}>First</Tab>
        <Tab fontSize={{base: "5px", sm: "10px", md: "15px"}}>Second</Tab>
        <Tab fontSize={{base: "5px", sm: "10px", md: "15px"}}>Third</Tab>
    </TabList>
    <TabPanels>
        <TabPanel>
            First
        </TabPanel>
        <TabPanel>
            Second
        </TabPanel>
        <TabPanel>
            Third
        </TabPanel>
    </TabPanels>
</Tabs>

这种方式过于冗余，我尝试通过TabList统一设置字体大小，代码如下，但该方法无法生效：

<Tabs>
    <TabList fontSize={{base: "5px", sm: "10px", md: "15px"}}> {/* This is more simple(But this will cause an error). */}
        <Tab>First</Tab>
        <Tab>Second</Tab>
        <Tab>Third</Tab>
    </TabList>
    <TabPanels>
        <TabPanel>
            First
        </TabPanel>
        <TabPanel>
            Second
        </TabPanel>
        <TabPanel>
            Third
        </TabPanel>
    </TabPanels>
</Tabs>

我查阅了Chakra UI的自定义默认主题和自定义组件样式文档，但这些方法会修改全站设置，而我只想修改网站局部的Tab组件字体大小。我仅掌握少量JavaScript/TypeScript知识，对HTML/CSS了解较少，请问有没有可行的解决办法？

可行解决方案 #

方法1：提取字体大小为变量（最简单） #

把重复的字体大小配置提取成一个变量，每个Tab直接引用这个变量，既减少冗余，又方便统一修改：

const tabFontSize = { base: "5px", sm: "10px", md: "15px" };

<Tabs>
    <TabList>
        <Tab fontSize={tabFontSize}>First</Tab>
        <Tab fontSize={tabFontSize}>Second</Tab>
        <Tab fontSize={tabFontSize}>Third</Tab>
    </TabList>
    {/* TabPanels部分保持不变 */}
</Tabs>

方法2：创建局部自定义Tab组件 #

用Chakra的styled函数创建一个仅在当前局部使用的自定义Tab组件，预设好字体大小，之后直接使用这个自定义组件即可：

import { styled, Tab } from "@chakra-ui/react";

// 创建仅当前文件生效的自定义Tab组件
const CustomTab = styled(Tab, {
    baseStyle: {
        fontSize: { base: "5px", sm: "10px", md: "15px" }
    }
});

// 使用自定义组件
<Tabs>
    <TabList>
        <CustomTab>First</CustomTab>
        <CustomTab>Second</CustomTab>
        <CustomTab>Third</CustomTab>
    </TabList>
    {/* TabPanels部分保持不变 */}
</Tabs>

方法3：通过TabList的sx属性控制子元素样式 #

利用Chakra的sx属性，通过CSS选择器直接给TabList下的所有Tab设置字体大小，不用逐个修改Tab：

<Tabs>
    <TabList sx={{
        '& > button': { // 选择TabList下的所有Tab按钮元素
            fontSize: { base: "5px", sm: "10px", md: "15px" }
        }
    }}>
        <Tab>First</Tab>
        <Tab>Second</Tab>
        <Tab>Third</Tab>
    </TabList>
    {/* TabPanels部分保持不变 */}
</Tabs>

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