React.js中如何消除Tabs组件与表格之间的空白区域？

你设置的TabIndicatorProps.style.backgroundColor只控制选中标签下方的指示器颜色，和Tabs周围的空白区域无关。要修改空白区域背景，需要给AppBar和Tabs组件本身设置背景色：

修改后的代码 #

<Box sx={{ bgcolor: '#EEEEEE', width: '25%' }}>
  <AppBar 
    position="static"
    sx={{ backgroundColor: '#EEEEEE' }}
  >
    <Tabs
      value={tabValue}
      onChange={handleTabChange}
      indicatorColor="secondary"
      textColor="inherit"
      variant="fullWidth"
      aria-label="full width tabs example"
      sx={{ backgroundColor: '#EEEEEE' }}
      TabIndicatorProps={{
        style: {
          backgroundColor: '#你的指示器颜色', // 这里是选中标签下方横线的颜色，按需调整
          height: '3px',
        },
      }}
    >
      <Tab label="Active" {...a11yProps(0)} />
      <Tab label="Inactive" {...a11yProps(1)} />
      <Tab label="Applicants" {...a11yProps(2)} />
    </Tabs>
  </AppBar>
</Box>

关键说明 #

• AppBar默认使用主题的primary色作为背景，必须显式设置它的backgroundColor才能覆盖默认样式
• 给Tabs组件也设置backgroundColor，确保整个Tabs区域背景和外层Box统一
• 原代码中TabIndicatorProps的设置仅影响选中标签的下划线，和空白区域背景无关

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