Material UI Button - 如何在 MuiButton 类中使用“::first-letter”伪元素选择器？答案

【问题标题】：Material UI Button - How can I use "::first-letter" pseudo element selector with MuiButton class?Material UI Button - 如何在 MuiButton 类中使用“::first-letter”伪元素选择器？
【发布时间】：2022-02-04 07:37:15
【问题描述】：

我正在尝试在 Material UI Button 中使用带有 Button 文本的句子。

https://mui.com/components/buttons/

按钮内的文字 - ADD FRIEND 应该变成 Add friend 的句子大小写。

我试图覆盖主题。但它不会以这种方式定位元素。请建议是否可以这样做。

createTheme({
 components: {
  MuiButton: {
    styleOverrides: {
      root: {
        '&::first-letter': {
          textTransform: 'uppercase',
        },
      },
    }
  }
}
});

【问题讨论】：

请看我的回答。如果它解决了您的问题，请投票并提出正确的问题。谢谢！

标签： javascript css reactjs material-ui

【解决方案1】：

我这样做的方式是在页面/组件的 makeStyles 中编写以下代码：

  parentOfButton: {
    '& .MuiButton-root': {
      textTransform: 'none',
    },
  },

<Box className={classes.parentOfButton}>
  <Button>Text</Button>
</Box>

更新

我曾尝试在 createTheme 中做同样的事情，并且成功了，这是我的做法：

  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
        },
      },
    },
  },

【讨论】：