样式材质反应选项卡以删除底部边框

Question

我正在尝试设置材质选项卡的样式，我可以通过创建主题并覆盖默认值来完成此操作

MuiTab: {
  styleOverrides: {
    root: {
      textTransform: 'capitalize', // Set textTransform to capitalize,
      fontWeight: 600,
      '& .MuiAvatar-root': {
        width: 72,
        height: 'auto',
        marginBottom: 6,
      },
      '&.Mui-selected': {
        borderTop: `2px solid ${COLORS.PrimaryMedDark}`,
        borderLeft: `1px solid ${COLORS.BorderGray}`,
        borderRight: `1px solid ${COLORS.BorderGray}`,
        borderBottom: 'none',
        color: COLORS.PrimaryMedDark,
        '.MuiAvatar-img': {
          //border: ' 2px solid #FFC44D !important',
        },
      },
      '& .MuiIconButton-root': {
        padding: 0,
        backgroundColor: COLORS.White,
      },
    },
  },
},

您可以看到我能够向所选选项卡添加左、右和上边框。

除了底部边框外，一切正常，我无法以任何方式将其删除。

我找到了这个解决方案来为选项卡提供自定义设计

https://mui.com/base-ui/react-tabs/

但是要做的事情太多了，因为就我而言，除了底部边框之外，我能够在样式中实现我想要的一切。

那么，创建上面链接中提到的自定义样式组件是实现它的唯一方法还是有什么方法可以使其与现有选项卡一起使用？

更新

尝试将

'&.Mui-selected'

上的边框底部设置为此

borderBottom: '5px solid red',

，然后查看结果

所以基本上这条蓝线不是所选

Tab

元素上的边框，因为我在所选选项卡上设置的红色边框甚至出现在默认蓝线上方。因此，这个默认的蓝色边框位于其他位置，可能位于父级，这就是为什么它不会因所选选项卡样式的更改而消失。实际上，当选择选项卡时，它会出现动画。

Answer 1

你可以试试

outline: none !important; //important remove even if element focus

我不确定它是否能解决您的问题。

实际上，边框会由轮廓或边框创建，但也会由伪元素创建，例如

::after

或

::before

。请检查所有案例。