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

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

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