我試圖有按鈕文本的材料UI按鈕內的句子情況。

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

“添加朋友”按鈕內的文本應該變成“添加朋友”的句子大小寫。

我試著忽略主題。但是它不是以這種方式定位元素的。 請建議，如果這是可能的。

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

我的做法是在頁面/組件的makeStyles中編寫以下代碼:

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

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

更新

我曾在createTheme中嘗試過做同樣的事情，它成功了，我是這樣做的:

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

例如，通過樣式，我無法將傳輸的文本的第一個字母大寫，直到我將傳輸的文本包裝在某種標記中

.button {
    & > *::first-letter {
      text-transform: uppercase;
    }
  }

  <Button className={s.button}>
    <p>some text</p>
  </Button>

按鈕元素可能不支持偽元素，如& amp*第一個字母。

對我來說，用印刷術包裝文本是可行的，印刷術確實支持這個css偽類。

<Button>
    <Typography
        sx={{
            "&::first-letter": {
                textTransform: "capitalize",
            },
        }}
    >
    text
    </Typography>
</Button>