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 が実現する
    スタイル拡張に対して開かれた
    汎用コンポーネント

    View Slide

  2. 自己紹介
    Name: sammiya(さんみや)
    オンライン教育サービスでテック
    リードをやっている
    ふだんは React, TypeScript,
    Rails, Ruby を使っています
    2

    View Slide

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

    3

    View Slide

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

    →今日はスタイルの拡張しやすさに絞って話します
    4

    View Slide

  5. Mantineのスタイル拡張しやすさ
    目次
    ① styles API で全ての内部の要素のスタイルを上書きできる
    ② コンポーネントのHTML要素を上書きできる
    ③ 全てのスタイルを一括で外す unstyle プロパティがある
    ④ ①〜③を満たすコンポーネントを容易に自作できる
    5

    View Slide

  6. Mantineのスタイル拡張しやすさ
    ①: styles API で全ての内部の要素のスタイルを上書きできる
    スライダーの場合
    6

    View Slide

  7. Mantineのスタイル拡張しやすさ
    ①: styles API で全ての内部の要素のスタイルを上書きできる
    スライダーの場合
    7
    ここの線、ちょっと太いな …

    View Slide

  8. Mantineのスタイル拡張しやすさ
    ①: styles API で全ての内部の要素のスタイルを上書きできる
    styles API で細くできる
    8

    thumb

    View Slide

  9. Mantineのスタイル拡張しやすさ
    ①: styles API で全ての内部の要素のスタイルを上書きできる
    他もこのくらいカスタマイズできる
    9
    https://mantine.dev/ より

    View Slide

  10. Mantineのスタイル拡張しやすさ
    ①: 全ての内部の要素のスタイルを上書きできる
    10
    styles API の名称は公式ドキュメン
    トで確認できる
    ※検証ツールでクラス名見てもOK!
    (mantine-Slider-thumb というクラ
    ス名があたっている)

    View Slide

  11. Mantineのスタイル拡張しやすさ
    ②: コンポーネントのHTML要素を上書きできる
    カードの場合
    11
    https://mantine.dev/core/card/ より改変

    View Slide

  12. Mantineのスタイル拡張しやすさ
    ②: コンポーネントのHTML要素を上書きできる
    カードの場合
    12
    カード(div)をクリックすると
    別ページを新しいウィンドウで開き
    たいな…

    View Slide

  13. Mantineのスタイル拡張しやすさ
    ②: コンポーネントのHTML要素を上書きできる
    - component=ʼaʼ でdiv を a に変更できる(Polymorphic)
    - href や target 属性も直接書ける(型補完つき)
    - component={Link} のように書けば next/link 等のLinkコ
    ンポーネントも使える
    13

    View Slide

  14. Mantineのスタイル拡張しやすさ
    ③: 全てのスタイルを一括で外す unstyle プロパティがある
    Headless UIチックな使い方もできる!
    (画像はタブの場合)
    14

    View Slide

  15. Mantineのスタイル拡張しやすさ
    ④: ①〜③を満たすコンポーネントを容易に自作できる
    15
    ①createStyles で
    useStyles Hooks を作成し
    Styles API を提供
    ②Box を使って
    HTML要素を上書き可に
    ③unstyled を
    useStyles に渡す
    https://mantine.dev/guides/custom-components/ より改変

    View Slide

  16. まとめ:Mantineのスタイル拡張しやすさ
    ① styles API で全ての内部の要素のスタイルを上書きできる
    ② コンポーネントのHTML要素を上書きできる
    ③ 全てのスタイルを一括で外す unstyle プロパティがある
    ④ ①〜③を満たすコンポーネントを容易に自作できる
    16

    View Slide

  17. 紹介しきれなかった点:デフォルト値設定の容易さについて
    - styles はデフォルト値をContext API経由で渡せる
    - 自作コンポーネントのデフォルト値は
    useDefaultComponentProps で設定できる
    17

    View Slide

  18. ありがとうございました
    Mantine に興味を持った方は
    コミュニティが作成したUI集
    Mantine UI https://ui.mantine.dev/
    も覗いてみてください!
    18

    View Slide