reactjs - 使用 styled-components 开发组件库时如何使用全局样式

Question

当我使用 styled-components 开发我的组件库时，我如何使用一种根样式，例如

  box-sizing: border-box;
  outline: 0;
  margin: 0;
  padding: 0;
  border: 0;

在整个库中。

我现在添加全局样式手册，使用这样的 css:

export const global = css`
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  padding: 0;
  border: 0;
`
const RealButton = styled.button`
  ${global};

`

库会导出很多组件，导出每个组件时是否必须添加全局样式手册。或者有一个简单的方法来实现它。

Answer 1

将你的全局样式放在一个文件中，ex: GlobalStyle.js 就像这样

import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
box-sizing: border-box;
outline: 0;
margin: 0;
padding: 0;
border: 0;
}
`;
export default GlobalStyle;

然后导入您的 GlobalStyle 组件并将其放置在您的 React 树的顶部，通常像这样放在 app.js 上

import React, { Fragment } from 'react';
import GlobalStyle from './globalStyle';
function App() {
return (
<Fragment>
<GlobalStyle />
<div>
My App
</div>
</Fragment>
 );
 }
 export default App;