通常，在使用纯CSS时，我有一个包含以下内容的样式表：
html {
height: 100%;
}
body {
font-size: 14px;
}
在我的React项目中使用styled-components时，如何为html或body标记设置样式？我是否仅为此目的维护一个单独的CSS文件？
答案 0 :(得分：31)
当然，您可以通过@Override
@RequestMapping(value="/v1/{var:.*}/resource", method = RequestMethod.GET)
public ResponseEntity<Response> readDocuments(
@PathVariable(value = "var") String param1,
@RequestParam(value = "param2", required = false, defaultValue = "string1") String param2,
@RequestParam(value = "param3") @Size(min = 1) List<String> param3,
@RequestParam(value = "param4", required = false) @Min(0) @Max(10) Integer param4)
{
// do something
}
标记维护单独的CSS文件，并将其包含在HTML中。
<link>：使用Styled-components中的createGlobalStyle。
v4import { 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>
： Styled-components还导出v4助手以从JavaScript注入全局CSS：
injectGlobal有关详细信息，请参阅API documentation。
答案 1 :(得分：13)
截至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的更多信息。
答案 2 :(得分：0)
如果您使用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