styled-components - html 또는 본문 태그에 스타일을 설정하는 방법

styled-components - html 또는 본문 태그에 스타일을 설정하는 방법

보통 순수 CSS를 사용할 때 다음을 포함하는 스타일시트가 있습니다.

html {
    height: 100%;
}

body {
    font-size: 14px;
}

사용시styled-components리액트 프로젝트에서는, 어떻게 하면,html또는body태그? 이 목적으로만 별도의 CSS 파일을 유지해야 합니까?

물론 HTML에 포함된 개별 CSS 파일을 관리할 수 있습니다.<link>태그를 붙입니다.

위해서v4:

스타일드 컴포넌트에서 createGlobalStyle을 사용합니다.

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

미리v4:

스타일드 컴포넌트는 또한injectGlobalJavaScript에서 글로벌 CSS를 주입하는 도우미:

import { injectGlobal } from 'styled-components';

injectGlobal`
  html {
    height: 100%;
    width: 100%;
  }
`

자세한 내용은 API 문서를 참조하십시오.

2018년 10월 현재.

메모

injectGlobal API가 삭제되어 스타일 컴포넌트 v4에서 createGlobalStyle로 대체되었습니다.

의사에 의하면createGlobalStyle이

글로벌 스타일을 처리하는 특수 Styled Component를 생성하는 도우미 기능입니다.일반적으로 스타일링된 컴포넌트는 로컬 CSS 클래스로 자동으로 범위가 지정되므로 다른 컴포넌트와 격리됩니다.createGlobalStyle의 경우 이 제한이 해소되어 CSS 리셋이나 베이스 스타일시트 등을 적용할 수 있습니다.

예

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <Navigation /> {/* example of other top-level stuff */}
  <GlobalStyle whiteColor />
</React.Fragment>

공식 문서에 대한 자세한 내용은 참조하십시오.

언급URL : https://stackoverflow.com/questions/46760861/styled-components-how-to-set-styles-on-html-or-body-tag