mr.hana

yarn create react-app my-app --template @chakra-ui/typescript

mr.hana

Reactが16だったのでアップグレード。

yarn upgrade --latest

mr.hana

theme作成。

// theme/theme.ts
import { extendTheme } from '@chakra-ui/react';
export const theme = extendTheme({
  colors: {
    primary: {
      50: '#fbe9e7',
      100: '#ffccbc',
      200: '#ffab91',
      300: '#ff8a65',
      400: '#ff7043',
      500: '#ff5722',
      600: '#f4511e',
      700: '#e64a19',
      800: '#d84315',
      900: '#bf360c',
    },
  },
});

mr.hana

こっちだとReactのバージョンが17なってる。

npx create-react-app my-app --template @chakra-ui/typescript

mr.hana

Responsive

配列かオブジェクトで設定できる。

配列

const breakpoints = ["0em", "30em", "48em", "62em", "80em", "96em"]

nullに場合生成しない。

オブジェクト

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
  This is responsive text
</Text>

ブレークポイントは次の通り。
base = 0em, sm = 30em, md = 48em, lg = 62em, xl = 80em, 2xl = 96em

例

<>
  <Box
    height={{
      base: "100%", // 0-48em
      md: "50%", // 48em-80em,
      xl: "25%", // 80em+
    }}
    bg="teal.400"
    width={[
      "100%", // 0-30em
      "50%", // 30em-48em
      "25%", // 48em-62em
      "15%", // 62em+
    ]}
  />
  {/* responsive font size */}
  <Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
  {/* responsive margin */}
  <Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="tomato" />
  {/* responsive padding */}
  <Box bg="papayawhip" p={[2, 4, 6, 8]}>
    Padding
  </Box>
</>

カスタマイズ

createBreakpointsを使う。

import { createBreakpoints } from "@chakra-ui/theme-tools"

mr.hana

初期値はここらへん参照。
packages/theme/src

global

import { mode, Styles } from "@chakra-ui/theme-tools"

const styles: Styles = {
  global: (props) => ({
    body: {
      fontFamily: "body",
      color: mode("gray.800", "whiteAlpha.900")(props),
      bg: mode("white", "gray.800")(props),
      transition: "background-color 0.2s",
      lineHeight: "base",
    },
    "*::placeholder": {
      color: mode("gray.400", "whiteAlpha.400")(props),
    },
    "*, *::before, &::after": {
      borderColor: mode("gray.200", "whiteAlpha.300")(props),
      wordWrap: "break-word",
    },
  }),
}

export default styles

modeは次の式と同様。

- mode(lightMode, darkMode)(props)
+ props.colorMode === "dark" ? darkMode : lightMode

カスタマイズする時はこんな感じ。

const theme = {
  styles: {
    global: {
      ".mdx-prose": {
        h1: {
          fontSize: "xl",
          mb: "4",
        },
        p: {
          fontSize: "sm",
          lineHeight: "1.4",
        },
      },
    },
  },
}

mr.hana

初期値ば普通に公式サイトにあったけど微妙に整合性取れてない。

mr.hana

返信

mr.hana

Text and Layer Styles

これとても素晴らしい。
primary用セットとかはここで設定したらいいんじゃないかな。
ColorModeとの兼ね合いが問題？

Layer Style

Color or text color
Background color
Border width and border color
Box shadow
Opacity

Text Styles

Font family, weight, and size
Line height
Letter spacing
Text decoration (strikethrough and underline)
Text transform (uppercase, lowercase, and capitalization)

mr.hana

StackとFlexの使い分け。
Stackはこんな感じで使ってた。

mr.hana

NARUTO好きらしい。
CheckboxGroup便利っぽい。

mr.hana

fieldset, legendとしても使える。コンポーネントの構成も好み。

<FormControl as="fieldset">
  <FormLabel as="legend">Favorite Naruto Character</FormLabel>
  <RadioGroup defaultValue="Itachi">
    <HStack spacing="24px">
      <Radio value="Sasuke">Sasuke</Radio>
      <Radio value="Nagato">Nagato</Radio>
      <Radio value="Itachi">Itachi</Radio>
      <Radio value="Sage of the six Paths">Sage of the six Paths</Radio>
    </HStack>
  </RadioGroup>
  <FormHelperText>Select only if you're a fan.</FormHelperText>
</FormControl>

mr.hana

List component is used to display list items. It renders a <ul> element by default.

とのことでListは単純に箇条書きに使うらしい。
一覧的に使うならdividerもあるStackのが良さそう。

mr.hana

かっこいい。無駄に使いたくなる。