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
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
100
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
2.2k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
C++20 射影変換
faithandbrave
0
570
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
Team operations that are not burdened by SRE
kazatohiei
1
300
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
360
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Producing Creativity
orderedlist
PRO
346
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The World Runs on Bad Software
bkeepers
PRO
69
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
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