MUI 애니메이션이 적용되지 않는 이유MUI의 컴포넌트를 사용할 때 애니메이션이 정상적으로 적용되지 않는 경우가 있다. 이번 글에서는 그 원인과 해결 방법을 정리해본다.1. 애니메이션이 적용되지 않는 이유MUI 애니메이션이 동작하지 않는 주된 원인은 드로어 내부 아이템이 별도 컴포넌트로 분리되지 않았기 때문이다.MUI의 는 내부 아이템을 렌더링할 때 React.cloneElement 등을 활용해 애니메이션을 관리하는데, 이 과정에서 같은 내부 요소가 별도 컴포넌트로 분리되지 않으면 애니메이션 적용이 제한될 수 있다.즉, 내부에서 리스트 아이템을 직접 렌더링하면 애니메이션이 정상적으로 실행되지 않을 가능성이 크다.2. 해결 방법: 분리❌ 기존 코드 (애니메이션 미적용) {na..
라이브러리/MUI
설치npm install notistack 예시 코드src / app / layout.tsximport ClientSnackbarProvider from "@/lib/ClientSnackbarProvider";export default function RootLayout({ children,}: Readonly) { return ( {children} );} src / lib / ClientSnackbarProvider.tsx"use client";import { enqueueSnackbar, SnackbarProvider } from "notistack";const ClientSnackbarProvider = () => ..
타입 정의"use client";import React from "react";type ExampleType = { Icon: React.ReactElement;};const Example = ({ Icon }: ExampleType) => { return ( {Icon} );};export default Example;타입 정의 방법 : React.ReactElement로 정의 후 JSX로 렌더링 사용 예시 import Example from "./Example";import { Psychology, Science, Engineering, MedicalServices, Gavel, Palette, Business, School, Agriculture, Waves, ..
const GptAnswerAccordion = styled(Accordion)` width: 100%; border-radius: 8px; box-shadow: none !important; &::before { display: none; }`;
"use client";import { useSidebarStore } from "@/store/SidebarStore";import { Drawer } from "@mui/material";import styled from "styled-components";import SidebarItem from "./SidebarItem";// 기존 Sidebar 컴포넌트는 유지하고, 중복된 선언을 제거합니다.const Sidebar = () => { const { isOpen, setIsOpen, items } = useSidebarStore(); const category = Object.keys(items); const RenderSidebarItems = category.map((item) => );..
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; /* 잘린 텍스트 뒤에 '...' 추가 */`;
