Question

0

35

Views

chakra ui - the style does not apply

What I expect:

What actually shows:

The size is not the same as my expectation.

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>
  );
}

Codesandbox:
https://codesandbox.io/s/romantic-snowflake-km87e?file=/src/App.js

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-04T03:34:34.509Z

It seems that you have forgotten the provider setup. Please make sure to read the setup in the documentation.

You should have the following code surrouding the App component, helping you fix the problem.

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

<ChakraProvider>
  <App />
</ChakraProvider>