如何使用MUI Styled修改React组件内Header的border-bottom样式

为什么你之前的方法无效 #

直接给StyledTabs设置borderBottom是作用在SpecialTabs组件的外层容器上，无法穿透到组件内部的Header元素；同时Header本身的内联styled样式优先级更高，所以外层样式无法覆盖它。

下面提供两种可行的解决方案：

方法一：通过自定义类名定位内部Header #

给SpecialTabs里的Header添加自定义类名，再在StyledTabs中通过类选择器精准覆盖样式：

const SpecialTabs = () => {
  const Header = styled.div`
    position: relative;
    border-bottom: 1px solid red;
  `;
  return (
    // 添加自定义类名用于定位
    <Header className="special-tabs-header">
      <Tabs>
        ...
      </Tabs>
    </Header>
  )
}

const StyledTabs = styled(SpecialTabs)(() => ({
  "& .Mui-disabled": {
    padding: 0,
  },
  // 定位内部Header并修改边框样式
  "& .special-tabs-header": {
    borderBottom: "none" // 替换为你需要的样式，比如"2px solid #ccc"
  }
}));

方法二：通过props传递自定义样式 #

让SpecialTabs接收外部传入的样式props，动态合并到内部Header的样式中：

// 接收外部传入的headerStyle props
const SpecialTabs = ({ headerStyle }) => {
  const Header = styled.div`
    position: relative;
    border-bottom: 1px solid red;
    // 合并外部传入的样式，优先级高于默认样式
    ${headerStyle}
  `;
  return (
    <Header>
      <Tabs>
        ...
      </Tabs>
    </Header>
  )
}

const StyledTabs = styled(SpecialTabs)(() => ({
  "& .Mui-disabled": {
    padding: 0,
  },
  // 通过props传递Header的自定义样式
  headerStyle: {
    borderBottom: "none"
  }
}));

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