javascript - chakra ui - the style does not apply - Stack Overflow

admin管理员组

文章数量:1359202

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:
=/src/App.js

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

• javascript
• css
• reactjs
• chakra-ui

Share Improve this question Follow asked Feb 15, 2022 at 9:28 CCCCCCCC 6,5111010 gold badges6161 silver badges144144 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 ponent, helping you fix the problem.

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

<ChakraProvider>
  <App />
</ChakraProvider>

本文标签： javascriptchakra uithe style does not applyStack Overflow