El tamaño no es el mismo que mis expectativas.
Aplicación.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> ); }
Códigosycaja:
https://codesandbox.io/s/romantic-snowflake-km87e?file=/src/App.js
Parece que ha olvidado la configuración del proveedor. Asegúrese de leer la configuración en la documentación .
Debería tener el siguiente código alrededor del componente de la aplicación, que lo ayudará a solucionar el problema.
import { ChakraProvider } from '@chakra-ui/react' <ChakraProvider> <App /> </ChakraProvider>