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-focused fieldset {
border-color: #007bff !important;
border-width: 1px !important; /* ✅ 두께를 고정 */
}
`;
'라이브러리 > MUI' 카테고리의 다른 글
[MUI] MUI icons 아이콘 컴포넌트 props로 전달받기 | MUI 아이콘 프롭스 타입 정의 방법 (0) | 2025.03.04 |
---|---|
[MUI] 아코디언 <Accordion/> 기본 그림자(box-shadow) 제거 (0) | 2025.03.03 |
[MUI] Drawer 테두리 둥글게 변경하기 (0) | 2025.02.21 |
[MUI] MUI 컴포넌트 styled-component로 기존 스타일 덮기 (0) | 2024.12.22 |
[MUI] <Typography /> 두줄만 보이게 하기, 두줄 이후로는 ... 으로 표시하기 (0) | 2024.12.22 |