설치npm install @emotion/is-prop-valid shouldForwardProp 정의src / utils / mui.tsimport isPropValid from "@emotion/is-prop-valid";export const shouldForwardProp = (prop: PropertyKey) => typeof prop === "string" && isPropValid(prop) && !prop.startsWith("$"); shouldForwardProp 사용src / components / Example.tsx================================= shouldForwardProp 임포트import { shouldForwardProp } from "@/..
라이브러리/MUI
🧩 문제 상황Next.js, MUI, Emotion 조합으로 컴포넌트를 구현하던 중, 콘솔에 아래와 같은 에러 메시지가 떴습니다.Error: Received `true` for a non-boolean attribute `$preview`.If you want to write it to the DOM, pass a string instead: $preview="true" or $preview={value.toString()}.처음엔 단순한 경고처럼 보였지만, 실제로는 styled 컴포넌트의 boolean 커스텀 prop이 그대로 HTML DOM으로 전달되며 발생한 오류였습니다. 🔎 문제 코드 분석에러가 발생한 컴포넌트는 다음과 같습니다: {preview && 빈 공간 생성} 그리고 styled로..
예시 코드type NewStackProps = { width: number}const NewStack = styled(Stack)(({ width }) => ({ width: width})); 참고자료https://stackoverflow.com/questions/69618158/using-styled-mui-system-utility-with-additional-props-typescript Using 'styled()' MUI System utility with additional props (Typescript)I'm working on a new project with MUI System v5. I'm using styled() utility here (not styled-components)..
import dayjs from "dayjs";import React from "react";import { DemoContainer, DemoItem } from "@mui/x-date-pickers/internals/demo";import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider/LocalizationProvider";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import "dayjs/locale/ko";const CalenderE..
src/components/SwipeableTemporaryDrawer.tsx"use client";import * as React from "react";import Box from "@mui/material/Box";import SwipeableDrawer from "@mui/material/SwipeableDrawer";import { Typography } from "@mui/material";import { useDrawerStore } from "@/store/ui/drawerStore";type Anchor = "top" | "left" | "bottom" | "right";export default function SwipeableTemporaryDrawer() { const { anch..
const CommentTextField = styled(TextField)` & .MuiOutlinedInput-root { border-radius: 24px; & fieldset { border-color: ${({ theme }) => theme.palette.primary.main}; } &:hover fieldset { border-color: ${({ theme }) => theme.palette.primary.main}; } &.Mui-focused fieldset { border-color: ${({ theme }) => theme.palette.primary.main}; border-width: 2px; } }`;
"use client";import { CircularProgress } from "@mui/material";const Loading = () => { return ;};export default Loading;
MUI 애니메이션이 적용되지 않는 이유MUI의 컴포넌트를 사용할 때 애니메이션이 정상적으로 적용되지 않는 경우가 있다. 이번 글에서는 그 원인과 해결 방법을 정리해본다.1. 애니메이션이 적용되지 않는 이유MUI 애니메이션이 동작하지 않는 주된 원인은 드로어 내부 아이템이 별도 컴포넌트로 분리되지 않았기 때문이다.MUI의 는 내부 아이템을 렌더링할 때 React.cloneElement 등을 활용해 애니메이션을 관리하는데, 이 과정에서 같은 내부 요소가 별도 컴포넌트로 분리되지 않으면 애니메이션 적용이 제한될 수 있다.즉, 내부에서 리스트 아이템을 직접 렌더링하면 애니메이션이 정상적으로 실행되지 않을 가능성이 크다.2. 해결 방법: 분리❌ 기존 코드 (애니메이션 미적용) {na..
