如何使用样式组件设置所有元素的样式？

【问题标题】：How to style all elements using styled-components?如何使用样式组件设置所有元素的样式？
【发布时间】：2019-03-01 08:59:57
【问题描述】：

我想这样做：

* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

我应该如何使用样式组件并做出反应？有新的 createGlobalStyle API，但我不确定它如何处理星号？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

使用createGlobalStyle 创建新的以下组件。

import { createGlobalStyle } from 'styled-components';


const GlobalStyle = createGlobalStyle`

* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

`;

export default GlobalStyle;

然后在您的App component 中导入并渲染上述组件。

【讨论】：