如何在Grommet的Heading组件中大写文本？

Question

我正在将grommet用于React项目，想知道如何在两个<Heading />组件中大写文本。

Answer 1

我使用了内联样式。

  <Heading style={{'textTransform': 'capitalize'}}>{product.name}</Heading>

Answer 2

您要制作标题capitalize并进行Uppercase。

您的答案就是这样做的

<Heading style={{'textTransform': 'uppercase'}}>{product.name}</Heading>

假设您的product.name = mobile，那么根据您的回答，您将获得所有MOBILE个字母的输出为uppercase。

要使其capitalize可用，请使用

<Heading style={{'textTransform': 'capitalize'}}>{product.name}</Heading>

现在您将获得所需的输出Mobile，即capitalized。

有关uppercase和capitalize的更多详细信息，请参考this。