Material UI(MUI)テーマをKotlin/JSで作成する
こんにちは。最近Kotlin/JSのMaterial UI(以下MUI)で遊んだときにフォントを変えたくて少し詰まったので共有します。
MUI のスタイルについて
MUIには色などの設定を管理するための手段としてThemeという概念があります。
これをKotlin/JSで実装します。
Kotlin/JS でMUI のTheme を作成する
今回はフォントにGoogle Fonts から提供されているものを使用します。
そのため、使用するHTMLファイルにlinkタグなどで使用できるようにしておいてください。
import kotlinx.js.jso
import mui.material.styles.createTheme
// 使用するフォントをListで定義する
var fonts = listOf("Noto Sans JP", "sans-serif").toString().drop(1).dropLast(1)
// テーマの作成
val SampleTheme = createTheme(
jso{
typography = jso{
fontFamily = fonts
}
}
)
まず使用するフォントをリストで定義します。このリストをfontFamily
に指定すればいいのですがそのままだとリストの両端にある[ ]
が邪魔になります。そこで、.drop(1).dropLast(1)
とすることで両端の不要な文字を削除しています。
なんだか汚い感じがするので、これの他に方法を知っている方はぜひ教えてください。
コンポーネントにテーマを適用する
今回は、コンポーネント全体に適用させたかったため全ての親要素でテーマを適用しています。
テーマを使用するにはThemeProvider
のtheme
プロパティに作成したテーマを指定するだけです。
fun main(){
render(
element = App.create(),
container = document.getElementById("root")!!
)
}
private val App = FC<Props>{
// ThemeProvider を使用する
ThemeProvider{
this.theme=SampleTheme // 作成したテーマの適用
CssBaseline()
Box{
Appbar()
}
}
}
注意点
同名のクラスが複数存在するためimportするクラスを間違える可能性がとても高いです。
うまく実行できないときはimportしているクラスを見直して、以下のクラスになっているか確認してください。
import mui.material.Box
import mui.material.CssBaseline
import mui.system.ThemeProvider
おわりに
Kotlin/JS とMUI を使ったテーマの適用方法を共有しました。
間違っている点や、改善点などあれば優しく指摘してくれると助かります。
Author And Source
この問題について(Material UI(MUI)テーマをKotlin/JSで作成する), 我々は、より多くの情報をここで見つけました https://qiita.com/rokuosan/items/8363eb83b4fed5e62a77著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .