チャクラUIは、セガンAdebayoによって作成された反応のための近代的なコンポーネントライブラリです.これは、フロントエンドのアプリケーションを構築するために必要なアクセス可能な、再利用可能な、および構成可能な反応コンポーネントが付属しています.
チャクラUI感情とスタイルのシステムを使用します.スタイルシステムは、UIコンポーネントライブラリを構築するために使用できる大きな種類のインフラストラクチャです.彼らは非常に多くのことをはるかに容易にします.
偉大な注意は、チャクラのUIは、フレンドリーな任意の反応アプリの準備ができやすいです.

Create - ReactAppの例

import React from 'react';
import {
  Button
} from '@chakra-ui/react';
import customTheme from "./customTheme";

const App = () => {
  return (
      <Button colorScheme="facebook" leftIcon={<FaFacebook />}>
    Facebook
  </Button>
  );
}

例証例

import React from 'react';
import { Box } from 'react';

type props = {
   message: string;
};

const flexSettings = {
    flex: "1",
    minW: "300px",
    textAlign: "center",
    color: "white",
    mx: "6",
    mb: "6"
} as const; 

const Message = ({message}: props) => {

   return (
     <Box {...flexSettings}>
        {message}
     </Box>
   )
}

CHAKRA - UIを使用したスタイルコンポーネントの例

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

const Card = chakra("div", {
   baseStyle: {
    h: '300px',
    w: '300px',
    rounded: "sm",
    shadow: "lg",
   }
})

...
<Card>
 hello there
</Card>