[Error] MUI `fullWidth` Error 해결

에러발생

React 에서 MUI 라이브러리를 활용하여 Button에 fullWidth 를 적용했는데, 

콘솔창을 보니 MUI fullWidth 가 발생했다.

 

return(
	<Box>
        <Button fullWidth variant="outlined" onClick={toggleExpansion}
                sx={{
                    m : 1,
                    color: "gray",
                    borderColor: "gray",
                    ":hover": { borderColor: "gray" },
                    display: "flex",
                    justifyContent: "flex-start"
                }}
        >
            {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
        </Button>

        {expanded && (
            <Box fullWidth >
                {/* Toggle이 expanded 시 보여지는 컨텐츠 */}
            </Box>
        )}
	</Box>
)

 

 

사진첨부

 

발생코드

Warning: React does not recognize the `fullWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fullwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

 

해당 에러를 그대로 복사해서 번역기를 돌려보면 

'React는 DOM 요소에서 'fullWidth' 프롭을 인식하지 않습니다. 사용자 정의 속성으로 DOM에 표시하려면 소문자 'fullwidth'로 입력하고, 실수로 상위 구성 요소에서 전달했다면 DOM 요소에서 제거합니다.'

 

라고 번역되는 것을 확인할 수 있다.

 

 

이를 통해 해당 에러의 원인은 React에서 사용되지 않는 fullWidth 속성이 DOM 요소에 전달되어 발생한다는 것을 알 수 있었다.

즉, React가 인식하지 못하는 속성이라서 발생하는 경고이다.

 

 

해결방안

1. Button 안에 있는 fullWidth 에 true 요소를 추가해준다.

<Button fullWidth={true} variant="outlined" onClick={toggleExpansion}
	>
	...
</Button>

 

2. CSS 로 style 항목을 추가해준다. style={{ width: 100% }}

<Button variant="outlined" onClick={toggleExpansion}
	sx={{
    	m : 1,
        color: "gray",
        borderColor: "gray",
        ":hover": { borderColor: "gray" },
        display: "flex",
        justifyContent: "flex-start",
        width: "100%",
    }}
    >
    ...
</Button>

 

 

방법을 적용해봐도 해결이 되지 않길래 다시 코드를 유심히 봤더니,

Button 말고도 Box 에 fullWidth 이 있었다..

 

지우고 바로 CSS 요소를 적용해주니 해결..✨

 

결론은 온전한 정신으로 코딩하자.. !