Kotlin/JSでもMaterial UIのテーマをカスタマイズしたい

MUIにあるコンポーネントを自分でカスタマイズするにはThemeというものを用いる。

以下の公式ドキュメントを参照した。また、Kotlin/JS でMUI ラッパーを使用したサンプルがあるのでそちらも参考にした。

公式

公式(多分古め)

サンプル

実際に書く 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import kotlinx.js.jso
import mui.material.styles.createTheme

// 使用するフォント(Google Fonts)
var fonts = listOf("Murecho", "sans-serif").toString().drop(1).dropLast(1)

// テーマの作成
val SampleTheme = createTheme(
    jso{
        typography = jso{
            fontFamily = fonts
        }
    }
)

使用するフォントをリストにして、両端の [ ] をドロップすることで、実際にCSSで指定するような形にしている。

もっと綺麗にできる気がするが、この際どうでもいい。

兎にも角にも、これでテーマの作成ができた。

あとは使用するコンポーネントでテーマを適用するだけ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

fun main(){
    render(
        element = App.create(),
        container = document.getElementById("root")!!
    )
}

private val App = FC<Props>{
    ThemeProvider{
        this.theme=SampleTheme
        CssBaseline()

        Box{
            Appbar()
        }
    }
}

今回は全体に適用したかったので、ここに書くことにした。

テーマを使用するためには、ThemeProviderのthemeプロパティに作成したテーマを指定するだけで良い。

注意点

同名のクラスが複数存在するので、間違ったほうをimportをしないようにする必要がある。

うまく実行できない場合は、これらのパッケージがimportされているか確認しよう。

1
2
3

import mui.material.Box
import mui.material.CssBaseline
import mui.system.ThemeProvider