//tips
done
//smart contract
custom themeはprimaryなどのデフォルトのものを自身で使いやすいように変更できるものだった。
例えば、defaultのpaletteの中にprimaryがあるが青に定義されている。これを自身が好きな色に変更できるということ。
https://mui.com/customization/default-theme/#main-content
CSSの復習をしながら見ていく。
display:blockはHTMLで要素の種類が決まっているけど、レイアウト次第では種類を変えたい時もありますよね。そんな時に使うのがdisplay:block;です。
インライン要素に高さを持たせたい、幅を指定したい、または、インライン要素をブロックレベル要素に変えたいと思った時に使用する。
パーツの役割ごとに要素を分ける時はブロック要素が適切で、htmlで言うと下記のように要素は振り分けられている。
block要素： p、div、ul、h1〜h6などのタグの初期値
inline： a、span、imgなどのタグの初期値
displayプロパティは要素の表示のされ方や高さ・幅の設定が変えられる。
参考：
Muiのradioボタンはボタンと文字をつけて選択させようとした場合には<FromControlLabel>コンポーネントで包んで使用する必要がある。
https://qiita.com/mineyuji/items/b12aba85543f166e321b
useLocationは下記のような形でurlを示してくれる。
const ShowLocation = ()=> {
const location = useLocation();
return <div>
{location.pathname}
</div>;
}
useHistoryはhistoryオブジェクトを返し、さらにurlを編集することも可能。
const NextPageButton = ()=> {
const history = useHistory();
return <button onClick={()=> {
history.push('/some/url');
}}>click me!</button>;
}
これらの違いは、useLocationはURLが変わると再レンダリングが発生して新しいlocationオブジェクトが得られる一方で、historyオブジェクトは常に同じであり、そのためuseHistoryはURLが変わっても再レンダリングを起さないこと。
なので、レンダリング中にlocationが必要ならばuseLocationを使い、そうでないならuseHistoryを使うことになる。
参考：
https://blog.uhy.ooo/entry/2020-06-10/react-router-location/
Visual Studio Codeの便利機能「現在のカーソル位置にある単語と同じ単語を一括して選択する」はmacでも可能で、［Shift］＋［Command］＋［L］キーで実行可能とのこと。
Gridはbootstrapのように12で分割されて割り振られ、xs={12} md={3}のように画面の表示サイズにより表示を変えることができる。
xsの場合は左右いっぱいに広がり、mdの場合、4分の１を占める部分で表示される。
12の場合は改行して次のgridを呼び込むことになる。
sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}などは使わずに、Grid systemを利用した設計に変えていったほうが良さそう。
Cardを使用するときはcomponentフォルダを作成し、そちらにcardコンポーネントを作成し、pageでそちらを呼び込む形にするのが良いよう。
toolbar: theme.mixins.toolbar,という必殺技を見つけた。
https://qiita.com/sand/items/d4b6f39b5fe6027064b4
