diff --git a/docs/src/pages/css-in-js/advanced/advanced-pt.md b/docs/src/pages/css-in-js/advanced/advanced-pt.md new file mode 100644 index 00000000000000..98d0a3d9619888 --- /dev/null +++ b/docs/src/pages/css-in-js/advanced/advanced-pt.md @@ -0,0 +1,311 @@ +# Advanced + +
Advanced Usage.
+ +## Theming + +Add a `ThemeProvider` to the top level of your app to access the theme down the React's component tree. Then, you can access the theme object in the style functions. + +{{"demo": "pages/css-in-js/advanced/Theming.js", "react": "next"}} + +## Accessing the theme in a component + +You might need to access the theme variables inside your React components. + +### `useTheme` hook + +{{"demo": "pages/css-in-js/advanced/UseTheme.js", "react": "next"}} + +### `withTheme` HOC + +{{"demo": "pages/css-in-js/advanced/WithTheme.js", "react": "next"}} + +## Theme nesting + +You can nest multiple theme providers. This can be really useful when dealing with different area of your application that have distinct appearance from each other. + +```jsx +