Commit 6f7f9aa7 by Dominik Prokop

Add missing info about stylesFactory

parent 99411bf3
...@@ -25,13 +25,15 @@ const ComponentA = () => { ...@@ -25,13 +25,15 @@ const ComponentA = () => {
#### Styling complex components #### Styling complex components
In more complex cases, especially when you need to style multiple DOM elements in one component or when your styles that depend on properties and/or state, you should create a helper function that returns an object with desired stylesheet. Let's say you need to style a component that has different background depending on the theme: In more complex cases, especially when you need to style multiple DOM elements in one component or when your styles that depend on properties and/or state, you should create a helper function that returns an object with desired stylesheet. This function should also be wrapped in `stylesFactory` helper function that will provide basic memoization.
Let's say you need to style a component that has different background depending on the theme:
```tsx ```tsx
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { GrafanaTheme, useTheme, selectThemeVariant } from '@grafana/ui'; import { GrafanaTheme, useTheme, selectThemeVariant, stylesFactory } from '@grafana/ui';
const getStyles = (theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const backgroundColor = selectThemeVariant({ light: theme.colors.red, dark: theme.colors.blue }, theme.type); const backgroundColor = selectThemeVariant({ light: theme.colors.red, dark: theme.colors.blue }, theme.type);
return { return {
...@@ -48,11 +50,11 @@ const ComponentA = () => { ...@@ -48,11 +50,11 @@ const ComponentA = () => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
As red as you can ge As red as you can get
<i className={styles.icon} /\> <i className={styles.icon} />
</div> </div>
); );
} });
``` ```
For more information about themes at Grafana please see [themes guide](./themes.md) For more information about themes at Grafana please see [themes guide](./themes.md)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment