chakra ui - 样式不适用答案

【问题标题】：chakra ui - the style does not applychakra ui - 样式不适用
【发布时间】：2022-02-15 18:32:35
【问题描述】：

我的期望：

实际显示的内容：

大小和我想象的不一样。

App.js

import "./styles.css";
import { HStack, PinInput, PinInputField } from "@chakra-ui/react";

export default function App() {
  return (
    <div className="App">
      <HStack>
        <PinInput type="alphanumeric">
          <PinInputField />
          <PinInputField />
          <PinInputField />
          <PinInputField />
        </PinInput>
      </HStack>
    </div>
  );
}

代码沙盒：
https://codesandbox.io/s/romantic-snowflake-km87e?file=/src/App.js

【问题讨论】：

标签： javascript css reactjs chakra-ui

【解决方案1】：

您似乎忘记了提供程序设置。请务必阅读the documentation中的设置。

您应该在 App 组件周围放置以下代码，帮助您解决问题。

import { ChakraProvider } from '@chakra-ui/react'

<ChakraProvider>
  <App />
</ChakraProvider>

【讨论】：