如何自定义材质 ui 选项卡、选项卡滚动条

Question

在这里，我正在尝试自定义此 mui 选项卡、选项卡颜色和选项卡底部边框颜色。 我试图通过使用 makestyles 等来做到这一点，但没有任何效果。

我的代码是，

import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
    tab:{
     "& .MuiButtonBase-root":{
          marginLeft:"25px"

     }
    },
    tabs:{
         "& .MuiTabs-indicator":{
              ml:"30px"
         }
    }
})

此外，我还面临自定义 mui 类的问题。 虽然我使用的是 sx props 的解决方案，但我知道这不是最佳实践。

Answer 1

const theme = createTheme({
  components: {  
  MuiTabs: {
  styleOverrides: {
    indicator: {
      backgroundColor: 'orange',
      height: 10,
    },
  },
},
}
})

Answer 2

您可以使用属性'&.MuiTab-root.Mui-selected'设置所选标签样式的样式，就像当前标签的边框颜色一样，您可以使用属性TabIndicatorProps并添加 styles 属性，即

export const StyledTab = styled((Tab))({
    '&.MuiTab-root.Mui-selected': {
        color: 'gold',
    },

和

TabIndicatorProps={{                   
style: {
         backgroundColor: '#f1db29'
       }
}}