![]()
const Container = styled(Select)` width: 100%; padding: 10px 12px; font-size: 16px; border-radius: 6px; transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: white; & .MuiSelect-select { padding: 0px; } & input { border: 0px; } & fieldset { border: 1px solid #ccc; } &:hover fieldset { border-color: #ccc !important; } /* Select가 선택(포커스) 되었을 때 */ &..
MUI 컴포넌트를 styled-component로 덮어씌울때 CSS가 적용되지 않는 경우가 있다.이럴 때에는 !important를 사용해 나의 스타일을 최우선으로 적용하도록하면 된다.const FindPassword = styled(Typography)` display: block; margin-top: 12px !important; color: var(--gray);`;
MUI + styled-components로 구현하였습니다. 코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다const Name = styled(Typography)` display: -webkit-box; /* 플렉스 박스처럼 동작 */ -webkit-box-orient: vertical; /* 수직 방향으로 텍스트 정렬 */ overflow: hidden; /* 넘치는 텍스트 숨김 */ -webkit-line-clamp: 2; /* 최대 2줄까지만 표시 */ text-overflow: ellipsis; /* 잘린 텍스트 뒤에 '...' 추가 */`;
