reactjs - Chakra UI：paddingLeft 样式道具在 VStack 中为 > 10 的值提供了意想不到的结果

Question

我是 HTML/Javascript/React 的新手。这是我的示例代码。我正在使用 React.createElement 创建 4 个 Text 元素并将它们添加到 VStack 中。这些 Text 元素的 paddingLeft 样式属性分别设置为 0、5、10、15。渲染 VStack 时，paddingLeft 设置为 15 的最后一个 Text 元素显示不正确的左侧填充。有什么问题？我设置为 paddingLeft 的数字是否应该解释为百分比/10？

test() {
    const h1 = React.createElement(
        Text,
        {paddingLeft: 0},
        'Hi'
    );

    const h2 = React.createElement(
        Text,
        {paddingLeft: 5},
        'Hi'
    );

    const h3 = React.createElement(
        Text,
        {paddingLeft: 10},
        'Hi'
    );

    const h4 = React.createElement(
        Text,
        {paddingLeft: 15},
        'Hi'
    );

    return React.createElement(
        VStack,
        {align:"left"},
        [h1, h2, h3, h4]
    );
}

浏览器输出