Material ui 如何分别为左侧和右侧按钮向材质ui选项卡滚动按钮添加后样式

文档显示选项卡滚动按钮的默认类是

MuiTabScrollButton root

。我希望将

：：before

添加到左侧按钮，将

：：after

添加到右侧按钮

tab的代码非常标准，所以我添加了一个代码沙盒

---

如何最好在组件css中（使用class.something）而不是在全局css中执行此操作。

一种方法是针对

.MuiTabScrollButton root:first child

和

。MuiTabScrollButton root:last child

分别获取左侧和右侧按钮

const useStyles = makeStyles((theme) => ({
  customTabsStyle: {
    "& .MuiTabScrollButton-root:first-child::before": {
      content: "'L'"
    },
    "& .MuiTabScrollButton-root:last-child::after": {
      content: "'R'"
    }
  }
}));

<Tabs classes={{ root: classes.customTabsStyle }} />

const useStyles=makeStyles（（主题）=>({
自定义选项卡样式：{
“&.MuiTabScrollButton根：第一个子：：之前”：{
内容：“L”
},
“&.MuiTabScrollButton根：最后一个子：：之后”：{
内容：“'R'”
}
}
}));

---

一种方法是将

.MuiTabScrollButton root:first child

和

作为目标。MuiTabScrollButton root:last child

分别获取左侧和右侧按钮

const useStyles = makeStyles((theme) => ({
  customTabsStyle: {
    "& .MuiTabScrollButton-root:first-child::before": {
      content: "'L'"
    },
    "& .MuiTabScrollButton-root:last-child::after": {
      content: "'R'"
    }
  }
}));

<Tabs classes={{ root: classes.customTabsStyle }} />

const useStyles=makeStyles（（主题）=>({
自定义选项卡样式：{
“&.MuiTabScrollButton根：第一个子：：之前”：{
内容：“L”
},
“&.MuiTabScrollButton根：最后一个子：：之后”：{
内容：“'R'”
}
}
}));