---
tags: react,
disqus: hackmd
---

###### tags: `react` `style-component`

# style-component GlobalStyle

### 在寫style-component的時候，想要對body或html做css樣式該怎麼寫?


想像一下我的component都在App底下，這樣要如何寫可以影響到body的css?

這時候就可以使用style-component的`GlobalStyle`

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    background-color: #181818;
    color: #FFF;
  }
`

class App extends Component {
    return (
        <>
            <GlobalStyle />
            <div className="App">
                <Router>
                    <RouterComponent />
                </Router>
            </div>
        </>
    );
}

就是這麼簡單!!!

沒做過不知道就還是不會，所以這次遇到了我就記下它。

---

### 舊版style-component

如果你的style-component是v4之前的版本，使用方法會有稍微一點不一樣。

import { injectGlobal } from 'styled-components';

injectGlobal`
  html {
    height: 100%;
    width: 100%;
  }
`

因為我是5.1.1版本，所以不需要這樣用，但是怕以後會遇到這問題，所以也記起來。

---

最後我是參考[styled-components - how to set styles on html or body tag?](https://stackoverflow.com/questions/46760861/styled-components-how-to-set-styles-on-html-or-body-tag)