Skip to content

Commit 5767c01

Browse files
alanbsmithsapegin
authored andcommitted
Docs: Add documentation for Styled Components ThemeProvider (styleguidist#789)
1 parent 1e837c2 commit 5767c01

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

docs/Thirdparties.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,41 @@ const SalmonButton = styled.button`
178178
export default SalmonButton
179179
```
180180

181+
#### Adding Styled Components `ThemeProvider`
182+
183+
If your styled-components require a theme to render properly, you'll want to add a ThemeProvider Wrapper component to the docs.
184+
185+
First, you'll need to create your Wrapper component. For this example we'll put it in the `styleguide/` directory, but you can add it anywhere you want.
186+
187+
```jsx
188+
// styleguide/ThemeWrapper.js
189+
190+
import React, { Component } from 'react'
191+
import { ThemeProvider } from 'styled-components';
192+
import theme from 'where/your/theme/lives';
193+
194+
export default class ThemeWrapper extends Component {
195+
render() {
196+
return <ThemeProvider theme={theme}>{this.props.children}</ThemeProvider>
197+
}
198+
}
199+
```
200+
201+
Next, you'll need to add ThemeWrapper to your `styleguide.config.js`.
202+
203+
```javascript
204+
const path = require('path');
205+
206+
module.exports = {
207+
...
208+
styleguideComponents: {
209+
Wrapper: path.join(__dirname, 'styleguide/ThemeWrapper'),
210+
},
211+
}
212+
```
213+
214+
This will automatically apply your theme to your styled-components. When you fire up the styleguide, `npm run styleguide`, you should see your components render as expected.
215+
181216
### Fela
182217

183218
Check out the [official example](https://github.com/rofrischmann/fela/tree/master/packages/example-with-styleguidist).

0 commit comments

Comments
 (0)