반응형 📍 Front-End/🜸 Error8 MUI Error :: The `MuiMenuItem` component increases the CSS specificity of the `selected` internal state 📍 문제사항 회사에서 MUI기반의 UI를 사용하고 있는데 Custom이 필요한 부분은 styleOverrides로 수정하고 있다. 여기서 MenuItem의 높이는 38px, selected된 MenuItem의 backgroundColor는 red로 지정하고 싶어 아래와 같이 코드를 작성했다. root 아래 클래스 선택자를 이용하여 style을 입히는 방법도 있지만 selected, disabled등의 키가 자동 import 되기 때문에 아래와 같이 작성했다 MuiMenuItem: { styleOverrides: { root: { height: `38px`, }, selected: { backgroundColor: `red` }, }, }, 그 런 데 .. 콘솔에 아래와 같은 로그가 에러 로그가 찍혔다 클.. 2023. 8. 7. [Typescript] Attempted import error: 'createGlobalStyle' is not exported from 'styled-components' 타입스크립트 기반 리액트 프로젝트에서 createGlobalStyle이 안 불러와질 때 문제 타입스크립트 프로젝트에서 styled-compontents를 쓰기 위해 아래와 같이 공식 문서에 나와 있는 대로 styled-components를 설치했다 npm install --save styled-components //or yarn install styled-components 그리고 global style을 적용하기 위해 createGlobalStlye을 불러왔다 import { createGlobalStyle } from 'styled-components'; 그리고 맞이한 에러.. ^^ 불러올 수가 없다니. 근데 친절하게 해결법도 알려준다! 해결 @types/styed-components를 설치하면 된.. 2022. 6. 11. [ESLint] module is not defined 오류 제거 방법 ESLint가 적용된 타입스크립트 프로젝트를 생성 후 웹팩 환경을 구성하는데 module.export를 하려고 하면 자꾸만 module is not defined라는 오류가 발생했다. 원인 eslint 설정 시 환경(env)에서 node를 설정해주지 않았기 때문. 해결 .eslintrc.json 파일을 열고 node가 true로 되어있지 않거나 없다면 추가해주면 된다! module.exports = { env: { browser: true, es2021: true node: true, // 추가 }, ...code }; 2022. 6. 4. [리액트/React] Module not found: Can't resolve 'swiper/react' (Swiper 안될때) yarn으로 swiper를 설치하고 yarn add swiper swiper를 불러왔는데 import { Swiper } from 'swiper/react'; swiper가 안 불러와지고 아래와 같은 에러가 발생했다 Module not found: Can't resolve 'swiper/react' 1. 원인 현재 Swiper의 가장 최신 버전은 v8.1.6이고 공식 문서를 살펴보니 CRA는 아직 pure ESM을 지원하지 않고 v7.2.0에서 사용할 수 있다 2. 해결법 해결 방법에는 두 가지가 있다. 첫 번째 방법은 가장 최신 버전인 v.8.x.x을 사용하고 싶으면 Swiper를 사용할 때 직접 파일을 가져온다 import { Swiper, SwiperSlide } from 'swiper/reac.. 2022. 5. 30. 이전 1 2 다음 반응형
