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