reactjs - styled-components - 如何在 html 或 body 标签上设置样式？

Question

通常，当使用纯 CSS 时，我有一个样式表，其中包含:

html {
    height: 100%;
}

body {
    font-size: 14px;
}

在我的 React 项目中使用 styled-components 时，如何为 html 或 body 标记设置样式？我是否需要为此目的维护一个单独的 CSS 文件？

Answer 1

当然，您可以维护一个单独的 CSS 文件，通过 <link> 将其包含在 HTML 中。标签。

对于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 :

Styled-components 还导出 injectGlobal从 JavaScript 注入(inject)全局 CSS 的帮助器:

import { injectGlobal } from 'styled-components';

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

请参阅API documentation了解更多信息!