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

styled-components - how to set styles on html or body tag?

通常，当使用纯 CSS 时，我的样式 sheet 包含：

html {
    height: 100%;
}

body {
    font-size: 14px;
}

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

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

对于v4:

使用 Styled-components 中的 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:

注入全局 CSS 
import { injectGlobal } from 'styled-components';

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

查看API documentation了解更多信息！

截至 2018 年 10 月。

NOTE

The injectGlobal API was removed and replaced by createGlobalStyle in styled-components v4.

根据文档 createGlobalStyle 是

A helper function to generate a special StyledComponent that handles global styles. Normally, styled components are automatically scoped to a local CSS class and therefore isolated from other components. In the case of createGlobalStyle, this limitation is removed and things like CSS resets or base stylesheets can be applied.

例子

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>

在 official docs 上阅读更多内容。

如果使用material-UI，则不需要styled-components来实现。您可以简单地覆盖 theme.js 文件中设置的默认背景：

overrides: {
  palette: {
    background: {
      default: "#fff"
    }
  }
}

然后你只需要将根组件包装在 Material-UI CssBaseLine component:

<MuiThemeProvider theme={muiTheme}>
  <CssBaseline />
  <App />
</MuiThemeProvider>

基线组件sets the default background on the <body> element。

也看看这个问题：https://github.com/mui-org/material-ui/issues/10764