Material UIの使い方
はじめに
本記事では、Material UIを使用するうえで必要な情報を簡単にまとめています。
- Material UIとは
- Material UIを使ってのスタイリング
- theme
Next.js(typeScript)でMaterial UI(スタイリングエンジンEmotion)を導入していることを前提としています。
もし導入されていない場合は、以下を参考にして下さい。
Material UI
では、始めにMaterial UIの基本構文を見てみましょう。
<Box component="div" sx={{
height: 300,
width: 350,
}}>
<Typography paragraph={true}>Hello World!</Typography>
</Box>
html5では下記のようになります。
※実際にはclass等が設定されたりするので、あくまでイメージです。
<div>
<p>Hello World!</p>
</div>
このようにmaterial UIでは、独自のコンポーネントが用意されており、一見すると分かりにくく見えるかもしれませんが、簡単にウェブサイトをレスポンシブに表示することが可能です。
公式のDemoにてレスポンシブで機能することが確認出来ます。
実際に検証ツールで画面サイズを変えて確認して見て下さい。
Material UIでのスタイリング
普段HTMLを使用する場合、基本的にはCSSやSASSとを用いるかと思います。
Material UIでは、sxプロパティを使用することでCSSのようにスタイリングすることが出来ます。
基本的にはCSSと同じように書くことが出来ますが、例えばborder-bottomは下記のようにborderBottomと記載をする必要があります。
「-」は削除して、代わりに「-」後の1文字目を大文字で記載します。
<Box component="div" sx={{
height: 300,
width: 350,
borderBottom: 1,
mx: auto,
":hover": {
opacity: ".8",
},
"@media screen and (min-width:400px)": {
width: 200,
},
}} />
marginやpaddingは、省略して、「margin: m」、「padding: p」と記載が出来ます。
marginLeftは「ml」と記載することも出来ます。
marginX（mx）でmarginTop、marginBottomを指定、marginY(my)でmarginLeft、marginRightの指定をすることも出来ます。
プロパティについて詳しく知りたい場合は、下記、公式サイトのプロパティ一覧を確認してみてください。
また、下記にてレスポンシブサイトを作成する方法を紹介しておりますので、是非ご参考ください。
theme
materialUIには独自のthemeと呼ばれるオブジェクトがあります。
デフォルト値が設定されており、そのまま値を使用することもできますし、自身好みに値を変更することもできます。
ThemeProviderのthemeプロパティに作成したthemeを渡すことで、そのThemeProvider内でのみthemeを利用できます。
いくつもthemeを作成することもでき、異なるthemeをThemeProvider毎に反映することも可能です。
使用例
※colorプロパティとsxプロパティとしてのcolorで適用方法が違うことに注意してください。
import { createTheme } from "@mui/material/styles";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
let theme = createTheme({
palette: {
primary: {
main: "#42a5f5",
light: "#1976d2",
dark: "#1565c0",
},
})
const App = () => {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Box component="div">
<Button color="primary" sx={{
color: theme.palette.primary.main,
}}>
ボタン
<Button>
</Box>
</ThemeProvider>
);
}
下記、公式サイトにてthemeのデフォルト値の確認が出来ます。
まとめ
今回は最初の記事として、Material UIの使い方についてまとめました。
Material UIを使う上で最低限必要な情報ですので、是非実際に書きながら動かしながら読んでいただければと思います。
Material UIやReact、typeScriptについての記事を主に書いていこうかと思いますので、今後ともよろしくお願いします。
Discussion
正しくはmarginX（mx）でmarginLeft、marginRight、marginY(my)でmarginTop、marginBottomを指定できる、ではないでしょうか