名称未設定

タイトルはそのうち考えます

202112振り返り

振り返り

毎月書くことにしました
初回更新から遅くない？

KPT(人生)

Keep

  • React周りの学びが多かった
  • 記事を書いた

Problem

  • 仕事とソシャゲで可処分時間が消滅していた
    • やろうと思っていた絵の練習をする時間が取れていない
    • 仕事の生産性が低がち
  • 何かと転職の2文字がちらつくことが増えたがあまり行動できていない
  • 金使いすぎ
  • ケーキ2ホール食べた
    • クリスマスだから仕方ないね
  • 振り返りを書くのが遅れた

Try

  • 振り返りは早めに書く
  • 記事を書く(多分無理)
  • 絵を描く
    • 3/31はカレンの誕生日。備えよう
    • 定期的に練習する日を作るのが大事だと思うが忘れそう
    • どうにか習慣化する
  • 課金は控える
    • そろそろサポカ資産的にも抑えられる…はず…
    • そもそも2月3月はアニバラッシュで大変だから控えざるを得ない
  • 仕事の生産性を上げる
    • 詰まったときにインターネット放浪が始めるのやめろ
  • フィリス、リディースールを片付ける
    • 頑張ろう

やってることの進捗(なんでも)

  • 割愛

摂取したコンテンツ

  • 割愛

5000円以上の買い物

悩み事

  • 金がない
  • 時間がない

来月

tryに書いたこと、特にアトリエを片付けるのとお絵かきの習慣化は頑張りたい
仕事もきっちり集中して8時間で成果出して終わるようにしていきたい
最悪土日にやればいいかに甘えすぎ。それで結果的に自分の首を絞めている

月というか年単位だけどあまり漫画を読めてなかったので消化していきたい 全ては仕事の生産性にかかっている。頑張ろう

12月は仕事に人生を浸食されすぎていたので、やりたいことやれる時間を作っていきたいね

こんな感じで毎月やっていこうかな。後から見返せる形で振り返りを残していきたかったので
割愛が多かったから来月はちゃんと書く
以上！！！！

MUI(Material UI v5)でEmotionを利用する

技術 React Typescript

React + TypeScriptの環境でMUIとEmotionを併用する際についてのメモです

MUIとEmotionのインストール

Reactの環境構築は割愛します

MUIとEmotionをまとめてインストール

$ npm install @mui/material @emotion/react @emotion/styled

or

$ yarn add @mui/material @emotion/react @emotion/styled

その他必要なパッケージがあれば適宜

Emotionのcss propsを利用する

/* @jsxImportSource @emotion/react */
import React from 'react";
import { css } from '@emotion/react';
import Button from '@mui/material/Button';
 
const style = css({
  background: 'red'
});
 
const App = (): JSX.Element => {
  return (
    <Button variant="contained" css={style}>
      ボタン
    </Button>
  );
};
 
export default App;

こんな感じ

おまじないを消す

Emotionをtsx(jsx)で利用する際はimport時に
/** @jsx jsx */ or /* @jsxImportSource @emotion/react */
といったおまじないを記述する必要があります。やってられません

なんでおまじないがいるの？って話はググってください

こんなことはやってられないので公式の解決策を利用します

$ npm add @emotion/babel-preset-css-prop

or

$ yarn add @emotion/babel-preset-css-prop

追加後、 .babelrc かwebpackの babel-loader の presets に @emotion/babel-preset-css-prop を追加します

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  loader: require.resolve('babel-loader'),
  options: {
    ...,
    presets: [
      ...,
      '@emotion/babel-preset-css-prop',
    ],

こんな感じ。これにて解決

MUIのThemeをEmotionで利用する

MaterialUIのThemeをそのままEmotionで利用することができます

import { Box, Button } from '@mui/material';
import { createTheme } from '@mui/material';
import { Theme, ThemeProvider } from '@emotion/react';

const theme = createTheme();

const style = (theme: Theme) =>
  css({
    background: theme.palette.primary.main,
  });

const App = (): JSX.Element => {
  return (
    <ThemeProvider theme={theme}>
      <Box>
        <Button variant="outlined" css={style}>hoge</Button>
      </Box>
    </ThemeProvider>
  );
}

export default App;

ただしこれではMUI由来のThemeの項目を利用しようとすると型エラーが出ていしまいます

そこでEmotionのThemeをMUIのThemeの型を継承する形で上書きします

import { Theme as MUITheme } from '@mui/material/styles';
import theme from '@/Themes/Theme';

declare module '@emotion/react' {
  export interface Theme extends MUITheme {}
}

こんな感じ
これで型エラーもなくpaletteやtypographyを利用できます

拡張

themeに項目を追加したいケースもあります

const theme = createTheme(theme, {
  width: {
    small: '5rem',
    medium: '10rem',
    large: '20rem',
    full: '100%'
  }
});

その場合は先程の上書きした型に項目を追加してください

declare module '@emotion/react' {
  export interface Theme extends MUITheme {
    width: {
      small: string;
      medium: string;
      large: string;
      full: string;
    }
  }
}

こんな感じ

styledの利用

styledもMUIと同様にThemeを用いながら使用できます

import React from 'react';
import { Box, Button } from '@mui/material';
import { styled as muiStyled } from '@mui/material/styles';
import styled from '@emotion/styled';

const StyledBox = styled(Box)(({ theme: Theme }) => ({
  background: theme.palette.primary.main,
}));
const MUIStyledBox = muiStyled(Box)(({ theme: Theme }) => ({
  background: theme.palette.primary.dark,
}));

const Test = (): JSX.Element => {
  return (
    <Box>
      <Box>
        normal box
      </Box>
      <StyledBox>
        emotion styled box
      </StyledBox>
      <MUIStyledBox>
        mui styled box
      </MUIStyledBox>
  </Box>
  );
}

export default Test;

注意点　

sxで上書きする際の挙動がMUIとEmotionで異なります

import React from 'react';
import { Box, Button } from '@mui/material';
import { styled as muiStyled } from '@mui/material/styles';
import styled from '@emotion/styled';

const StyledBox = styled(Box)(({ theme: Theme }) => ({
  background: theme.palette.primary.main,
  display: 'flex',
  justifyContent: 'center'
}));
const MUIStyledBox = muiStyled(Box)(({ theme: Theme }) => ({
  background: theme.palette.primary.dark,
  display: 'flex',
  justifyContent: 'center'
}));

const Test = (): JSX.Element => {
  return (
    <Box>
      <Box>
        normal box
      </Box>
      <StyledBox sx={{display: "flex", justifyContent: "flex-start"}}>
        emotion styled boxは justifyContent: centerになる
      </StyledBox>
      <MUIStyledBox sx={{display: "flex", justifyContent: "flex-start"}}>
        mui styled boxはjustifyContent: flex-startになる
      </MUIStyledBox>
  </Box>
  );
}

export default Test;

MUIはsxでの定義が優先されますがEmotionはstyledの定義が優先されます
お気をつけを

おわり

備忘録代わりに殴り書きしました
そのままコピペしても使えない部分が結構ありそうですがご容赦