MUI - spacing

 

: 자식 요소들 간의 간격을 조정하는 spacing prop

이 값은 아무 양수인 숫자 아무거나 가능. 

 

(mui의 기본 간격 단위는 8픽셀이다. 만약  12면 96px의 간격)

 

MUI - sx props

 

 

: mui 컴포넌트를 커스터마이징, 컴포넌트 안의 인스턴스별로 속성 지정하기

import FTextButton from '@/components/Common/Button';








 

 

$

: 템플릿 리터럴 내에서 자바스크립트 변수를 참조함

 

width: $ {({ size }) => 

size === 'xsmall' ? '16px' : 

size === 'small' ? '20px' : 

size === 'medium' ? '24px' : '36px'};




(조건) ? 참일 때 값 : 

거짓일 때 값[ (조건) ? 참일 때 값:

거짓일 때 값{ (조건) ? 참일 때 값: 거짓일 때 값}]



 

Avatar:

사용자의 프로필을 나타내기 위해 사용되는 이미지나 아이콘

 

 

 

 

important:

 

<BoxButton sx={{ padding: '14px 16px 14px 14px !important' }} onClick={onClose}>

 

important는 CSS에서 사용되는 키워드로, 특정 스타일 규칙이 다른 규칙보다 우선 적용되도록 강제하는 역할

 

+ Recent posts