kanachi-blog
※注意
Chakra UIはReactだけではなくVueでも利用することができますが、本文書ではReactを利用して動作確認を行なっているのでReactの知識があることを前提としています。
インストール方法
プロダクトのnode_moduleを配置している(する)フォルダ直下で以下のコマンドを打つ
- chakraUIはemotionというcssをtypescript上で記述することのできるライブラリに依存しているのでemotion関連も同時にインストールします。
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motionインストール完了後、アプリケーション全体でChakra UIを利用できるようにルートコンポーネントをChakra ProviderでWrapする必要があります。
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { ChakraProvider } from "@chakra-ui/react";
import "./main.scss";
import App from "./app/App";
import { store } from "./shared/store";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<BrowserRouter>
<Provider store={store}>
<ChakraProvider>
<App />
</ChakraProvider>
</Provider>
</BrowserRouter>
);ts configに追記
divなどHTMLタグに対してcss prop形式の記法をする上で必要
{
"compilerOptions": {
/* Adding Emotion types */
"types": ["@emotion/react/types/css-prop"]
}
}使用方法
各コンポーネント内でchakra-UIは以下のように使うことができます
//コンポーネント(chakra-UIから利用するコンポーネントをimportする)
import { Heading, Button, Box } from "@chakra-ui/react";
export function HelloWorld() {
//chakra-UIはemotionのようにオブジェクトスタイルで独自cssを記述することができる
const buttonStyle = {
backgroundColor: "green",
color: "white",
fontSize: "1.2rem",
};
//reactのJSX内で利用するコンポーネントをタグ形式で記述する
return (
<Box w="100%">
<Heading>
<div>Hello chakra UI!</div>
</Heading>
//独自CSSをカスタマイズしたい場合は sx というクラスにjson形式で記述したcssを代入する
<Button sx={buttonStyle}>Button</Button>
</Box>
);
}
利用できるコンポーネント一覧
