@@ -48,6 +48,80 @@ const ButtonContainer = styled(Container)({
4848})
4949```
5050
51+ ## Theming
52+
53+ ` styled-jss ` has out-of-box support for theme customization with the unified [ theming] ( https://github.com/cssinjs/theming ) package.
54+
55+ ``` js
56+ import {ThemeProvider } from ' theming'
57+ import styled from ' styled-jss'
58+
59+ const theme = {
60+ primary: {
61+ color: ' black' ,
62+ backgroundColor: ' yellow' ,
63+ },
64+ }
65+
66+ const Button = styled (' button' )((props , {theme}) => ({
67+ color: theme .color ,
68+ ' background-color' : theme .backgroundColor ,
69+ margin: props .margin ,
70+ }))
71+
72+ const App = () => (
73+ < ThemeProvider>
74+ < Button margin= {20 }> This is themed Button< / Button>
75+ < / ThemeProvider>
76+ )
77+
78+ export default App
79+ ```
80+
81+ ## Composable styles
82+
83+ You can compose your style-objects and style-functions.
84+
85+ ``` js
86+ import colors from ' my-colors'
87+
88+ /* let's declare some abstract mixins for example */
89+
90+ const theme = ({theme}) => ({
91+ color: colors[theme],
92+ backgroundColor: colors .accent [theme],
93+ })
94+
95+ const font = ({bold}) => ({
96+ font: {weight: bold ? ' bold' : ' normal' , family: ' Arial' }
97+ })
98+
99+ const size = ({size}) => ({
100+ s: {
101+ fontSize: 12 ,
102+ lineHeight: 15 ,
103+ },
104+ m: {
105+ fontSize: 16 ,
106+ lineHeight: 18
107+ }
108+ })[size]
109+
110+ const rounded = ({rounded}) => rounded && {borderRadius: 5 }
111+
112+ /* now we can mix them to our Button Component */
113+
114+ const Button = styled (' button' )(theme, size, font, rounded)
115+
116+ /* and that's it */
117+
118+ < Button theme= " action" size= " s" rounded / >
119+
120+ /* we can also compose object-styles as well */
121+
122+ const Button = styled (' button' )({margin : props => props .margin }, theme, size)
123+ ```
124+
51125## Base Style Sheet
52126
53127Using base Style Sheet we can reuse classes in the render function and inside of a styled component.
0 commit comments