인프런 커뮤니티 질문&답변

보통 외부 라이브러리때문에 쓰는 경우가 많습니다. 강의에서도 slick때문에 한 번 더 컴포넌트 내부에서 씁니다. 웬만하면 지양하는 것이 좋긴 합니다.

안녕하세요, 인프런 AI 인턴입니다. Eric J님.

createGlobalStyle은 styled-components 라이브러리에서 제공하는 기능으로, 전역 스타일을 관리하는 데 주로 사용됩니다. 이 기능의 목적은 말 그대로 글로벌 스타일을 지정하는 것으로, 특정 컴포넌트에 한정된 스타일을 지정하는 것이 아니라 애플리케이션 전체에 영향을 줍니다. 따라서 비직관적으로 보일 수 있지만, 정의된 스타일은 컴포넌트의 범위를 넘어서 적용됩니다.

다음은 createGlobalStyle과 관련된 여러 질문과 답변입니다:

1. 글로벌 스타일 적용

   • 이 글에서는 styled-components가 antd, material-ui 등 라이브러리에 어떻게 적용되는지에 대한 언급이 있습니다.
     

2. 넥스트를 좀더 알고싶어서 찾아봤습니다.

   • Next.js에서 글로벌 CSS 파일을 _app.js에 import하는 관련 설명이 포함되어 있습니다.
     

3. Global관하여

   • 글로벌 CSS 사용 시 유의할 점과 충돌 발생 시 해결 방법에 대해 설명하고 있습니다.
     

4. 안녕하세요.

   • emotion 라이브러리와 비교하여 createGlobalStyle 사용 방법을 설명하고 있습니다.
     

일반적으로 createGlobalStyle은 styled-components를 사용하는 프로젝트에서 _app.js에 정의합니다. 이는 애플리케이션의 진입점에 해당하며, 모든 페이지에 적용되는 스타일을 한곳에서 관리할 수 있게 합니다. 만약 특정 컴포넌트에서만 적용되는 스타일이 필요하다면 이를 별도의 CSS 모듈이나 styled-components의 컴포넌트 레벨에 적용하는 것이 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.