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
230
Mantine が実現する、スタイル拡張に対して開かれた汎用コンポーネント
こちらの交流会の LT 登壇に使用したスライドです
https://devguil.connpass.com/event/266712/
sammiya
December 11, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Git Rebase
bkuhlmann
11
1.6k
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
140
Goのエラースタックトレースの歴史と今後
sonatard
7
1.3k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
170
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
780
VS Code をプロダクトにどう取り込むか
onomax
1
360
使ってみよう Azure AI Document Intelligence
kosmosebi
2
310
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Making Projects Easy
brettharned
108
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Building Your Own Lightsaber
phodgson
99
5.7k
Product Roadmaps are Hard
iamctodd
44
9.7k
Building Applications with DynamoDB
mza
88
5.6k
Atom: Resistance is Futile
akmur
259
25k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
It's Worth the Effort
3n
180
27k
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