React中如何使用Material UI Tabs默认显示第一个标签页？

问题核心是状态初始值与标签/面板的value不匹配：你的Tab组件和TabPanel使用字符串类型的value（如"1"、"2"），但状态value的初始值是数字0，导致TabContext找不到对应value的面板，所以页面加载时所有内容都处于隐藏状态。

修复步骤 #

将状态的初始值改为第一个标签对应的value字符串"1"：

// 原代码
const [value, setValue] = React.useState(0);

// 修改后
const [value, setValue] = React.useState("1");

原理说明 #

TabContext的value属性需要和Tab的value、TabPanel的value完全匹配（包括数据类型），才能激活对应的标签和面板。第一个标签的value是"1"，将状态初始值设为"1"后，页面加载时会自动匹配第一个TabPanel，直接显示对应内容。

修改后的关键代码片段 #

const [value, setValue] = React.useState("1");

const handleChange = (event, newValue) => {
    setValue(newValue);
};

return (
    <div className="tabs-container">
        <h1 className="tabs-title">Products</h1>
        <ThemeProvider theme={tabsTheme}>
            <Box sx={{width: '100%', typography: 'body1', marginTop: '50px'}}>
                <TabContext value={value}>
                    <Box sx={{borderBottom: 1, borderColor: 'divider', maxWidth: '1200px', margin: '0 auto'}}>
                        <TabList onChange={handleChange}
                                 aria-label="lab API tabs example"
                                 variant="scrollable"
                                 scrollButtons
                                 allowScrollButtonsMobile
                        >
                            <Tab label="Tables & desks" value="1"/>
                            <Tab label="Sofas" value="2"/>
                            <Tab label="Beds" value="3"/>
                            <Tab label="Bookcases & wardrobes" value="4"/>
                            <Tab label="Kitchens" value="5"/>
                        </TabList>
                    </Box>
                    {tabs.map( (tab) =>
                        <TabPanel value={tab.idInString}>
                            <SectionTab key={tab.id} cards={tab.tabCards}/>
                        </TabPanel>
                    )}
                </TabContext>
            </Box>
        </ThemeProvider>
    </div>
);

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