インストール
Installation - Material UI
Install Material UI, the world's most popular React UI framework.
mui.com
npmインストールしていく。
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material
スタイルの直接記述
https://next–material-ui.netlify.app/system/properties/
next&
Material UIでは、sxプロパティを使用することでCSSのようにスタイリングすることが出来ます。
<AppBar sx={{ justifyContent: 'space-between' }} postion='static'>styledでの記述
Material-UIのstyledでの記述方法。
import { styled } from '@mui/material/styles';
const SButton = styled(Button)(({ theme }) => ({
color: '#fff',
}))
<SButton variant='contained' type='button' onClick={post}>追加</SButton>
Material-UIのstyledと普通のstyledをあわせる場合は、importのときに名前変える。
import { styled } from '@mui/material/styles';
import Styled from 'styled-components'; //大文字にする
ボタンの disabled を条件分岐
状況によって使い分ける。
<SButton variant='contained' type='button' onClick={post} disabled={!inputName} >追加</SButton>
<SButton variant='contained' type='button' onClick={post} disabled={!inputName && true} >追加</SButton>
<SButton variant='contained' type='button' onClick={post} disabled={inputName > 0 ? false :true} >追加</SButton>
