【Svelte】SvelteでMaterial UIを使ってみた 【Material UI】

6458 ワード
MaterialUI pug TypeScript JavaScript Svelte JavaScript テキストリンク

概要

SvelteにはReact等と同様にMaterialUIが用意されていますので、導入手順を書いていきます
hperrin/svelte-material-ui

手順

MaterialUIインストール

フルパッケージのインストール

console
yarn add -D svelte-material-ui

今回は何を使うかが未定なので、一旦フルインストールします。

補足：component単位のインストール

console
yarn add -D @smui/button
yarn add -D @smui/card

一応このようにcomponent単位でもインストール出来るので、実際に使うものが決まったらこちらのが良いかもです。

themeディレクトリの追加

プロジェクトのrootにthemeディレクトリを作ります。

console
mkdir theme

その直下に_smui-theme.scssというファイルを作成します

console
touch theme/_smui-theme.scss

index.htmlの追記

index.htmlにhttps://fonts.googleapis.com/から3つstylesheetを取り込みます。

index.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <!-- 追加-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
    <!-- -->
    <link rel='stylesheet' href='/global.css'>
</head>
<body/>
</html>

rollup.config.jsの修正

postcssにuse項目を追加して、./themeを読み込むようにします。

rollup.config.js
postcss({
        extract: './dist/css/bundle.css',
        sourceMap: true,
        use: [
            ['sass', {
              includePaths: [
                './theme',
                './node_modules'
              ]
            }]
          ],
        plugins: [
            autoprefixer()
        ]
    }),

MaterialUI適用

サンプル集がこちら
そのサンプル集の*.svelteのコードはこちらのGithubにあります

今はどうやら設定するattributeのDocumentsがないっぽくて、適用したいUIをGithubのページから探して同じ設定をするしかなさそう・・・

まとめ

今は英語Documentsすらままならない状態なので今後に期待です。
実際に使ったcomponentのまとめなども作れたらいいなぁと思ってます、チートシート的な。
大変ではありますが、調べながらやればキレイなMUIにはなるので是非ご利用を！