如何分别为左右按钮添加样式到材质ui选项卡滚动按钮

Question

文档显示选项卡滚动按钮的默认类是MuiTabScrollButton-root。我希望添加::before到左侧按钮和::after右侧按钮。

选项卡的代码非常标准，因此我添加了一个代码沙箱 https://codesandbox.io/s/confident-forest-x62tv?file=/src/App.js

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

Answer 1

一种方法是分别定位.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 }} />