2021-02-03 08:48:47 +00:00
|
|
|
# ThemeProvider
|
|
|
|
|
|
|
|
|
|
Custom theme provider based on [Theme Provider](https://www.styled-components.com/docs/advanced).
|
|
|
|
|
|
|
|
|
|
List of themes:
|
|
|
|
|
|
|
|
|
|
- [Base theme](https://dotnet.onlyoffice.com:8084/?path=/story/components-themeprovider--base-theme)
|
|
|
|
|
- [Dark theme](https://dotnet.onlyoffice.com:8084/?path=/story/components-themeprovider--dark-theme)
|
|
|
|
|
|
|
|
|
|
You can change the CSS styles in the theme, and they will be applied to all children components of ThemeProvider
|
|
|
|
|
|
|
|
|
|
### Usage
|
|
|
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import ThemeProvider from "@appserver/components/theme-provider";
|
|
|
|
|
import Themes from "@appserver/components/themes";
|
2021-02-03 08:48:47 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
const newTheme = {...Themes.Base, color: "red"}
|
|
|
|
|
|
|
|
|
|
<ThemeProvider theme={newTheme}>
|
|
|
|
|
<Box>
|
|
|
|
|
<Text>Base theme</Text>
|
|
|
|
|
</Box>
|
|
|
|
|
</ThemeProvider>;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### ThemeProvider Properties
|
|
|
|
|
|
2021-02-25 21:19:45 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ------- | :------: | :------: | :----: | :-----------: | ------------------------------------------ |
|
2021-02-03 08:48:47 +00:00
|
|
|
| `theme` | `object` | ✅ | - | `Base styles` | Applies a theme to all children components |
|
