Material UI(MUI)テーマをKotlin/JSで作成する

こんにちは。最近Kotlin/JSのMaterial UI(以下MUI)で遊んだときにフォントを変えたくて少し詰まったので共有します。

MUI のスタイルについて

MUIには色などの設定を管理するための手段としてThemeという概念があります。

これをKotlin/JSで実装します。

Kotlin/JS でMUI のTheme を作成する

今回はフォントにGoogle Fonts から提供されているものを使用します。

そのため、使用するHTMLファイルにlinkタグなどで使用できるようにしておいてください。

SampleTheme.kt

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プロパティに作成したテーマを指定するだけです。

App.kt

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 を使ったテーマの適用方法を共有しました。

間違っている点や、改善点などあれば優しく指摘してくれると助かります。