πŸ’» TIL 2023.02.18

κΉ€μ˜μš°(Yeongwoo Kim)Β·2023λ…„ 2μ›” 18일
0
post-thumbnail

βœ… 문제

  • Next Js둜 κ°œλ°œν•˜λ˜ 쀑 muiλ₯Ό μ‚¬μš©ν•˜μž 였λ₯˜κ°€ λ°œμƒν•¨
  • 처음 λ Œλ”μ‹œμ—λ§Œ 였λ₯˜κ°€ 뜨고 화면에 UIκ°€ λ‚˜νƒ€λ‚œ λ’€μ—λŠ” λ¬Έμ œμ—†μ΄ μž‘λ™ν•¨

πŸ” 원인 νŒŒμ•…

  • 크둬의 μ„±λŠ₯ ν…ŒμŠ€νŠΈλ₯Ό 톡해 μ•Œμ•„ 봀을 λ•Œ mui의 CSS적인 λΆ€λΆ„μ—μ„œ 였래 κ±Έλ¦°λ‹€κ³  μƒκ°ν–ˆλ‹€.

❗️ λ¬Έμ œκ°€ λ˜λŠ” μ½”λ“œ

LiveStudy.tsx

<Button
	disabled
	sx={{
	'&.Mui-disabled': {
	background: '#d9d9d9',
	color: 'white',
	},
	backgroundColor: 'black',
	color: 'white',
	}}
>
	μ‹€μ‹œκ°„ μˆ˜μ—… λ°”λ‘œκ°€κΈ°
</Button>
  • ν•΄λ‹Ή μ½”λ“œμ™€ 같이 MUIλ₯Ό μ»€μŠ€ν„°λ§ˆμ΄μ§• ν•˜λŠ” λΆ€λΆ„μ—μ„œ sxλ₯Ό 톡해 계속 cssλ₯Ό μˆ˜μ •μ„ λ°˜λ³΅ν•˜κ²Œ λ˜λ‹€λ³΄λ‹ˆ μ„±λŠ₯이 μ €ν•˜λλ‹€κ³  μƒκ°ν–ˆλ‹€.

πŸ‘ ν•΄κ²° λ°©μ•ˆ

  • Emotion/styledλ₯Ό 톡해 MUIλ₯Ό μ»΄ν¬λ„ŒνŠΈν™” ν•¨μœΌλ‘œ style을 ν•œλ²ˆμ— μ²˜λ¦¬ν•˜λ©΄ 될것 κ°™λ‹€κ³  μƒκ°ν–ˆλ‹€.
const LiveButton = styled(Button)`
  &.Mui-disabled {
    background-color: #d9d9d9;
    color: white;
  }
  background-color: black;
  color: white;
  width: 38.75vw;
`;

λŠλ‚€μ 


  • ν•΄λ‹Ή 사진듀을 봀을 λ•Œ 슀크립트 ν‰κ°€μ˜ 길이가 ν˜„μ €νžˆ 쀄어든 것을 λ³Ό 수 μžˆλ‹€.
  • λ¬Όλ‘  μ‹œκ°„μ΄ 쀄어듀긴 ν–ˆμ§€λ§Œ μ—¬μ „νžˆ 쀄일 수 μžˆλ‹€κ³  생각이 λ“€μ—ˆκ³ , λ‹€μŒλ²ˆμ—” webpack chunk 뢄리λ₯Ό ν†΅ν•΄μ„œ μ„±λŠ₯을 ν–₯μƒμ‹œμΌœλ³Ό 생각이닀.

πŸ“„ μ°Έμ‘°

https://mui.com
https://agilejung.tistory.com/entry/MUI%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

profile
μ°¨κ·Όμ°¨κ·Ό μ„±μž₯ν•˜λŠ” κ°œλ°œμžμž…λ‹ˆλ‹€

0개의 λŒ“κΈ€