how can i use global style when develop component library using styled-components

Question

When i use styled-components to develop my component library, how can i use one root style such as

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

in the whole libary.

I add the global style manual now, by use css like this:

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

`

libary will export lots of components, am i must add the global style manual when export each component. or there's a simple way to achieve it.

Answer 1

Put your global style in a file ex: GlobalStyle.js like this

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

Than import your GlobalStyle component and place it inside the the top of your React tree typically on app.js like this

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