设计 MUI 选项卡图标

Question

如何为选项卡图标应用自定义样式？

export default function EcomTabs(props) {
  return (
    <Tabs textColor="primary">
      <Tab
        sx={{ textTransform: "none", color: (theme) => theme.palette.grey[50],
      }}
        icon={props.icon}
        label={props.label}
      ></Tab>
    </Tabs>
  );
}

1. 尝试为组件创建一个新主题：

components: {
        MuiTabs: {
            iconWrapper: {
                color: "secondary",
            }

                },
        },

2. 也尝试过使用StyledTab，但效果不佳

在单独的字段中创建样式选项卡

const StyledTab = styled(Tab)  (({ theme }) => ({
    "& .MuiTab-root": {
        ".MuiTab-iconWrapper" :{
            color: theme.palette.primary.main,
        },
    },
}));

并导入到组件中

export default function EcomTabs(props) {
  return (
    <Tabs textColor="primary">
      <StyledTab
        sx={{ textTransform: "none", color: (theme) => theme.palette.grey[50],
      }}
        icon={props.icon}
        label={props.label}
      ></StyledTab>
    </Tabs>
  );
}```

Answer 1

假设您正在使用

material-ui v5

，您可以使用

withStyles

:

import { withStyles } from '@mui/styles';

const StyledTab = withStyles(Tab)(({ theme }) => ({
    root: { background: theme.palette.primary.main },
    iconWrapper: { color: theme.palette.primary.main },
}));