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
360
Mantine が実現する、スタイル拡張に対して開かれた汎用コンポーネント
こちらの交流会の LT 登壇に使用したスライドです
https://devguil.connpass.com/event/266712/
sammiya
December 11, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
80
26k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Hack Claude Code with Claude Code
choplin
3
1.4k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
440
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.9k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
12k
5つのアンチパターンから学ぶLT設計
narihara
1
160
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Featured
See All Featured
Building an army of robots
kneath
306
45k
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
BBQ
matthewcrist
89
9.7k
A better future with KSS
kneath
238
17k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Fireside Chat
paigeccino
37
3.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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