将单词的第一个字母大写以表示正常状态

Question

• 我正在尝试覆盖实质性的UI CSS。
• 我尝试将这两个词都大写，但仅在选定和悬停时才更改，
• 是否可以在正常状态下进行更改
• 我调试了但无法解决该问题。
• 你能告诉我如何解决它。
• 在下面提供我的代码段，在下面提供沙箱。

https://codesandbox.io/s/2pomwq2z20

const styles = theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.palette.background.paper
  },
  tabsIndicator: {
    backgroundColor: "red",
    textTransform: "capitalize"
  },
  tabRoot: {
    "&:hover": {
      color: "red",
      opacity: 1,
      textTransform: "capitalize"
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium,
      textTransform: "capitalize"
    },
    "&:focus": {
      color: "red",
      textTransform: "capitalize"
    }
  },
  tabSelected: {}
});

Answer 1

您需要在tabRoot中添加textTransform: "initial" 。 查看https://codesandbox.io/s/p5z9m029v0