react.js: 更改 mui 标签突出显示的文本颜色

Question

我有这个简单的标签面板：

 return (
      <Box  sx={{ width: '100%' }}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <Tabs TabIndicatorProps={{style: {background:'#5F4730'}}} value={value} onChange={handleChange} >
            <Tab label="Chaträume" {...a11yProps(0)} />
            <Tab label="Offene Fälle" {...a11yProps(1)} />
            <Tab label="Geschlossene Fälle" {...a11yProps(2)} />
          </Tabs>
        </Box>
        <TabPanel value={value} index={0}>
          <ChatRoomList chatIDState={props.statePassDown} roomType={''}/>
        </TabPanel>
        <TabPanel value={value} index={1}>
          <ChatRoomList  chatIDState={props.statePassDown} roomType={'open'}/>
        </TabPanel>
        <TabPanel value={value} index={2}>
          TO DO
        </TabPanel>
      </Box>
    );

这几乎是完美的。除了选项卡的突出显示文本颜色变成蓝色，看起来像这样：

如何更改高亮颜色的样式？

Answer 1

TabPanel 组件是否扩展标签？如果那么你应该做 style={{color:'black'}} 否则，您应该使用颜色对 TabPanel 进行样式设置：'black' 希望对您有所帮助。

react.js: 更改 mui 标签突出显示的文本颜色

react.js: change mui tab highlighted text color

reactjs