Skip to content

Commit 3b89594

Browse files
committed
[+] updated readme
1 parent 8c981a8 commit 3b89594

File tree

1 file changed

+40
-1
lines changed

1 file changed

+40
-1
lines changed

README.md

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
> This version is compatible with Vue 2.x
88
9-
```
9+
```
1010
yarn add vue-styled-components
1111
```
1212

@@ -151,6 +151,45 @@ const StyledButton = styled.button`
151151
export default StyledButton;
152152
```
153153

154+
### Theming
155+
156+
`vue-styled-components` has full theming support by exporting a `<ThemeProvider>` wrapper component. This component provides a theme to all `Vue` components underneath itself via the context API. In the render tree all `vue-styled-components` will have access to the provided theme, even when they are multiple levels deep.
157+
158+
Remember to register `ThemeProvider` locally.
159+
160+
```JSX
161+
import {ThemeProvider} from 'vue-styled-components'
162+
163+
new Vue({
164+
// ...
165+
components: {
166+
'theme-provider': ThemeProvider
167+
},
168+
// ...
169+
});
170+
```
171+
172+
Add your `ThemeProvider` component:
173+
174+
```JSX
175+
<theme-provider theme="{
176+
primary: 'palevioletred'
177+
}">
178+
<wrapper>
179+
// ...
180+
</wrapper>
181+
</theme-provider>
182+
```
183+
184+
And into your `Wrapper` component:
185+
186+
```JSX
187+
const Wrapper = styled.default.section`
188+
padding: 4em;
189+
background: ${props => props.theme.primary};
190+
`;
191+
```
192+
154193
### Style component constructors as `router-link`
155194

156195
You can style also Vue component constructors as `router-link` from `vue-router` and other components

0 commit comments

Comments
 (0)