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

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

Transcript

1. Mantine が実現する スタイル拡張に対して開かれた 汎用コンポーネント
2. 自己紹介 Name: sammiya（さんみや） オンライン教育サービスでテック リードをやっている ふだんは React, TypeScript, Rails, Ruby を使っています 2
3. Mantine とは？ React のコンポーネントライブラリ - 100以上のコンポーネント（と40の hooks） - TypeScript 対応 - emotion ベースのスタイリング - ダークモードへのネイティブサポート … 3
4. Mantine とは？ React のコンポーネントライブラリ - 100以上のコンポーネント（と40の hooks） - TypeScript 対応 - emotion ベースのスタイリング - ダークモードへのネイティブサポート … →今日はスタイルの拡張しやすさに絞って話します 4
5. Mantineのスタイル拡張しやすさ 目次 ① styles API で全ての内部の要素のスタイルを上書きできる ② コンポーネントのHTML要素を上書きできる ③ 全てのスタイルを一括で外す unstyle プロパティがある ④ ①〜③を満たすコンポーネントを容易に自作できる 5
6. Mantineのスタイル拡張しやすさ ①: styles API で全ての内部の要素のスタイルを上書きできる スライダーの場合 6
7. Mantineのスタイル拡張しやすさ ①: styles API で全ての内部の要素のスタイルを上書きできる スライダーの場合 7 ここの線、ちょっと太いな …
8. Mantineのスタイル拡張しやすさ ①: styles API で全ての内部の要素のスタイルを上書きできる styles API で細くできる 8 ↑ thumb
9. Mantineのスタイル拡張しやすさ ①: styles API で全ての内部の要素のスタイルを上書きできる 他もこのくらいカスタマイズできる 9 https://mantine.dev/ より
10. Mantineのスタイル拡張しやすさ ①: 全ての内部の要素のスタイルを上書きできる 10 styles API の名称は公式ドキュメン トで確認できる ※検証ツールでクラス名見てもOK! （mantine-Slider-thumb というクラ ス名があたっている）
11. Mantineのスタイル拡張しやすさ ②: コンポーネントのHTML要素を上書きできる カードの場合 11 https://mantine.dev/core/card/ より改変
12. Mantineのスタイル拡張しやすさ ②: コンポーネントのHTML要素を上書きできる カードの場合 12 カード（div）をクリックすると 別ページを新しいウィンドウで開き たいな…
13. Mantineのスタイル拡張しやすさ ②: コンポーネントのHTML要素を上書きできる - component=ʼaʼ でdiv を a に変更できる(Polymorphic) - href や target 属性も直接書ける（型補完つき） - component={Link} のように書けば next/link 等のLinkコ ンポーネントも使える 13
14. Mantineのスタイル拡張しやすさ ③: 全てのスタイルを一括で外す unstyle プロパティがある Headless UIチックな使い方もできる！ （画像はタブの場合） 14
15. Mantineのスタイル拡張しやすさ ④: ①〜③を満たすコンポーネントを容易に自作できる 15 ①createStyles で useStyles Hooks を作成し Styles API を提供 ②Box を使って HTML要素を上書き可に ③unstyled を useStyles に渡す https://mantine.dev/guides/custom-components/ より改変
16. まとめ：Mantineのスタイル拡張しやすさ ① styles API で全ての内部の要素のスタイルを上書きできる ② コンポーネントのHTML要素を上書きできる ③ 全てのスタイルを一括で外す unstyle プロパティがある ④ ①〜③を満たすコンポーネントを容易に自作できる 16
17. 紹介しきれなかった点：デフォルト値設定の容易さについて - styles はデフォルト値をContext API経由で渡せる - 自作コンポーネントのデフォルト値は useDefaultComponentProps で設定できる 17
18. ありがとうございました Mantine に興味を持った方は コミュニティが作成したUI集 Mantine UI https://ui.mantine.dev/ も覗いてみてください！ 18