Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mantine が実現する、スタイル拡張に対して開かれた汎用コンポーネント
Search
sammiya
December 11, 2022
Programming
0
300
Mantine が実現する、スタイル拡張に対して開かれた汎用コンポーネント
こちらの交流会の LT 登壇に使用したスライドです
https://devguil.connpass.com/event/266712/
sammiya
December 11, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
190
testcontainers のススメ
sgash708
1
120
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
return文におけるstd::moveについて
onihusube
1
650
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
760
Discord Bot with AI -for English learners-
xin9le
1
120
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
670
MCP with Cloudflare Workers
yusukebe
2
220
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
200
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
900
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
It's Worth the Effort
3n
183
28k
The Invisible Side of Design
smashingmag
298
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Rails Girls Zürich Keynote
gr2m
94
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
A designer walks into a library…
pauljervisheath
204
24k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Why Our Code Smells
bkeepers
PRO
335
57k
Speed Design
sergeychernyshev
25
670
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
Mantine が実現する スタイル拡張に対して開かれた 汎用コンポーネント
自己紹介 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 で全ての内部の要素のスタイルを上書きできる 他もこのくらいカスタマイズできる 9 https://mantine.dev/ より
Mantineのスタイル拡張しやすさ ①: 全ての内部の要素のスタイルを上書きできる 10 styles API の名称は公式ドキュメン トで確認できる ※検証ツールでクラス名見てもOK! (mantine-Slider-thumb
というクラ ス名があたっている)
Mantineのスタイル拡張しやすさ ②: コンポーネントのHTML要素を上書きできる カードの場合 11 https://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