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

Question

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

html {
    height: 100%;
}

body {
    font-size: 14px;
}

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

Answer 1

当然，您可以通过<link> 标记维护一个单独的 CSS 文件，将其包含在 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 了解更多信息！

Answer 2

截至 2018 年 10 月。

注意

injectGlobal API 被移除并替换为 createGlobalStyle 样式组件 v4。

根据文档createGlobalStyle 是

一个辅助函数，用于生成处理全局样式的特殊 StyledComponent。通常，样式化的组件会自动限定为本地 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>

阅读更多关于official docs。

Answer 3

如果你使用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