如何使用样式组件对所有元素进行样式设置？

Question

我想这样做：

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

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

Answer 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中导入并渲染上面的组件。