๐Ÿ’ปTIL 23.05.22

๊น€์˜์šฐ(Yeongwoo Kim)ยท2023๋…„ 5์›” 22์ผ
0
post-thumbnail

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}`,
      })}
    >
profile
์ฐจ๊ทผ์ฐจ๊ทผ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค

0๊ฐœ์˜ ๋Œ“๊ธ€