65

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

html {
    height: 100%;
}

body {
    font-size: 14px;
}

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

4

3 回答 3

113

当然，您可以维护一个单独的 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 文档！

于 2017-10-16T08:54:40.933 回答
25

截至 2018 年 10 月。

笔记

在 styled-components v4 中，injectGlobal API 被移除并被 createGlobalStyle 取代。

根据文档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>

阅读更多官方文档。

于 2018-10-03T06:39:36.263 回答
-2

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

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

然后，您只需将根组件包装在Material-UI CssBaseLine 组件中：

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

该基线组件设置元素的默认背景<body>。

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

于 2020-02-11T09:01:00.167 回答