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에서 사용되는 키워드로, 특정 스타일 규칙이 다른 규칙보다 우선 적용되도록 강제하는 역할
'WEB > HTML, CSS' 카테고리의 다른 글
테일윈드 속성 정리 (0) | 2024.07.14 |
---|---|
tailwind 문법 (1) | 2024.07.12 |
MUI 와 CSS-in-JS와 Tailwind와 clsx (0) | 2024.07.08 |
CSS - 오버플로우 처리하는 방법 (0) | 2024.07.03 |
CSS text-overflow 속성(텍스트를 박스에 맞게 자르기) (0) | 2024.04.16 |