概要

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にはなるので是非ご利用を！