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
270
Mantine が実現する、スタイル拡張に対して開かれた汎用コンポーネント
こちらの交流会の LT 登壇に使用したスライドです
https://devguil.connpass.com/event/266712/
sammiya
December 11, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
140
Новый уровень ML-персонализации Lamoda: Как мы усилили ее в каталоге и перенесли на другие продукты
lamodatech
0
270
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
280
個人開発で使ってるやつを紹介する回
yohfee
1
710
"Swarming" をコンセプトに掲げるアジャイルチームのベストプラクティス
boykush
2
260
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
110
Subclassing, Composition, Python, and You
hynek
3
180
"noncopyable types" の使いどころについて考えてみた
andpad
0
170
DjangoNinjaで高速なAPI開発を実現する
masaya00
1
540
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
380
dbt-ga4パッケージを実業務に導入してみた話
t_tokumaru_feedcorp
0
130
XP2024 っていう国際会議に行ってきたよの記
bonotake
4
240
Featured
See All Featured
Debugging Ruby Performance
tmm1
73
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
120
Facilitating Awesome Meetings
lara
49
6k
Become a Pro
speakerdeck
PRO
24
4.9k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Music & Morning Musume
bryan
46
6.1k
Code Reviewing Like a Champion
maltzj
519
39k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
It's Worth the Effort
3n
183
27k
Web Components: a chance to create the future
zenorocha
310
42k
Designing the Hi-DPI Web
ddemaree
280
34k
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