如何将Material-UI Box/Tab组件的边框颜色改为黑色？

方法一：使用Tabs内置Props快速修改 #

直接通过Tabs组件的内置属性配合Box的边框设置，就能快速把所有目标元素改成黑色：

<Box sx={{ borderBottom: 1, borderColor: 'black' }}>
  <Tabs 
    value={value} 
    onChange={handle} 
    aria-label="tabs"
    indicatorColor="black"
    textColor="black"
  >
    <Tab label="First Tab" />
    <Tab label="Second Tab" />
  </Tabs>
</Box>

• borderColor: 'black'：设置Box的底部分隔线为黑色
• indicatorColor="black"：修改选中Tab下方的下划线指示器颜色
• textColor="black"：修改选中Tab的文本颜色

方法二：用SX深度选择器自定义更多样式 #

如果需要调整未选中Tab的文本颜色等细节样式，可以用MUI的深度选择器覆盖默认类：

<Box sx={{ borderBottom: 1, borderColor: 'black' }}>
  <Tabs 
    value={value} 
    onChange={handle} 
    aria-label="tabs"
    sx={{
      // 未选中Tab的文本颜色
      '& .MuiTab-root': {
        color: '#222',
      },
      // 选中Tab的文本颜色
      '& .MuiTab-root.Mui-selected': {
        color: 'black',
      },
      // 选中Tab的指示器颜色
      '& .MuiTabs-indicator': {
        backgroundColor: 'black',
      }
    }}
  >
    <Tab label="First Tab" />
    <Tab label="Second Tab" />
  </Tabs>
</Box>

为什么之前的设置不生效？ #

你之前只修改了Box的边框颜色，但Tab组件的选中状态文本、指示器默认使用主题的primary色（蓝色），必须同时修改Tab相关的样式才能完全替换成黑色。

内容的提问来源于stack exchange，提问作者program.exe