Css ReactJS材质制作样式

我有我自己的主题，我可以很好地主题化。 现在我有三种不同风格的材质UI选项卡。这就是为什么我需要使用makeStyles来更改样式

这是我需要更改的选项卡的示例

...

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.pallete.primary
  },
  tabs: {
  /// some styles
  }
...
}
));

...


<Tabs
 ...someProps
 className={classes.tabs}
>

就我而言：

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: "#121D42",
   MuiButtonBase: {
    root: {
    ///some styles
    },
   }
  },
...

但它不适用于makeStyles

---

那么，如何使用makeStyles（）编辑选项卡内的按钮呢？或者请帮我找到解决方案，我现在已经找到了解决方案

通过使用样式化组件和创建样式化元素，我们可以更轻松地更改样式。我们应该提供样式

const NewButton = styled(({styledComponentProp, ...rest}) => (
  <Button classes={{label: 'label'}} {...rest}/>
))`
  .label {
    color: blue;
    font-size: ${props => props.styledComponentProp};
  }  
`



export const BlueButton = styled(props => {
  return (

    <StylesProvider injectFirst>
    <NewButton variant="contained" styledComponentProp="20px"> Red Labeled Button </NewButton>
  </StylesProvider>
  );
})`

`;

const NewButton=styled（{styledComponentProp，…rest}）=>(
))`
.标签{
颜色：蓝色；
字体大小：${props=>props.styledComponentProp}；
}  
`
export const BlueButton=styled（props=>{
返回(
红色标签按钮
);
})`
`;

但我们有更好的解决方案吗

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: "#121D42",
   MuiButtonBase: {
    root: {
    ///some styles
    },
   }
  },
...

const NewButton = styled(({styledComponentProp, ...rest}) => (
  <Button classes={{label: 'label'}} {...rest}/>
))`
  .label {
    color: blue;
    font-size: ${props => props.styledComponentProp};
  }  
`



export const BlueButton = styled(props => {
  return (

    <StylesProvider injectFirst>
    <NewButton variant="contained" styledComponentProp="20px"> Red Labeled Button </NewButton>
  </StylesProvider>
  );
})`

`;