1. Mui theme 사용하기

Mui에서 theme이란

• Theme에는 공통으로 사용하는 스타일 내용을 정의해둔 Object이다.

    palette: {
      primary: {
        main: '#000000',
      },
      secondary: {
        main: '#DCFC73',
      },
      thirdly: {
        main: '#939393',
      },
      fourth: {
        main: '#D9D9D9',
      },
    },
  

• 위와 같이 theme의 palette에 색을 정의를 해두고 mui component를 사용할 때 필요한 color를 palette에서 꺼내 쓰는 것이다.

• 또한 Typography의 스타일을 정의 할 수 있다.

  typography: {
      h1: { fontSize: '2.5rem', fontWeight: 'bold' },
      h2: { fontSize: '2.00rem', fontWeight: 'bold' },
      h3: { fontSize: '1.75rem', fontWeight: 'bold' },
      h4: { fontSize: '1.63rem', fontWeight: 'bold' },
      h5: { fontSize: '1.50rem', fontWeight: 'bold' },
      subtitle1: { fontSize: '1.38rem' },
      subtitle2: { fontSize: '1.25rem' },
      subtitle3: { fontSize: 16 },
      body1: { fontSize: '1.13rem' },
      body2: { fontSize: '1.00rem' },
   }

  <Typography
    sx={(theme) => ({
    color: theme.palette.primary.main,
    typography: ['h4', 'h4', 'h5', 'h3'],
    })}
  >

• theme에 Typography를 정의하고 Typography를 사용할 때 sx prop을 사용해서 Typography의 설정 값을 지정해주는 것이다.

• 위의 코드는 '색은 theme의 primary.main(즉, #000000)을 사용하고 typography는 breakpoint에 따라 (h4, h4, h5, h3)로 그려라.' 라는 뜻이다.

Typography highlight 표시

• MUI typography에서는 있을 수도 있지만, 적어도 내가 찾아본 문서에서는 따로 highlight 기능이 없었다. 그래서 어떻게 하면 만들 수 있을까를 생각했고, 검색해보니 생각보다 간단했다.
• Typography의 boxShadow를 통해 색을 집어넣고, shadow의 크기를 설정하면 된다.

  <Typography
    sx={(theme) => ({
    color: theme.palette.primary.main,
    fontWeight: '600',
    fontSize: ['16px', '18px', '20px', '20px'],
    boxShadow: `inset 0 -15px 0 ${theme.palette.secondary.main}`,
    })}
  >