Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mantine が実現する、スタイル拡張に対して開かれた汎用コンポーネント

sammiya
December 11, 2022

Mantine が実現する、スタイル拡張に対して開かれた汎用コンポーネント

こちらの交流会の LT 登壇に使用したスライドです
https://devguil.connpass.com/event/266712/

sammiya

December 11, 2022
Tweet

Other Decks in Programming

Transcript

  1. Mantine とは? React のコンポーネントライブラリ - 100以上のコンポーネント(と40の hooks) - TypeScript 対応

    - emotion ベースのスタイリング - ダークモードへのネイティブサポート … 3
  2. Mantine とは? React のコンポーネントライブラリ - 100以上のコンポーネント(と40の hooks) - TypeScript 対応

    - emotion ベースのスタイリング - ダークモードへのネイティブサポート … →今日はスタイルの拡張しやすさに絞って話します 4
  3. Mantineのスタイル拡張しやすさ ②: コンポーネントのHTML要素を上書きできる - component=ʼaʼ でdiv を a に変更できる(Polymorphic) -

    href や target 属性も直接書ける(型補完つき) - component={Link} のように書けば next/link 等のLinkコ ンポーネントも使える 13
  4. Mantineのスタイル拡張しやすさ ④: ①〜③を満たすコンポーネントを容易に自作できる 15 ①createStyles で useStyles Hooks を作成し Styles

    API を提供 ②Box を使って HTML要素を上書き可に ③unstyled を useStyles に渡す https://mantine.dev/guides/custom-components/ より改変