IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add missing info about stylesFactory

Browse Source
This commit is contained in:
Dominik Prokop 2019-10-14 12:29:10 +02:00
parent 99411bf37a
commit 6f7f9aa774
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
contribute/style-guides/styling.md
View File

@ -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 = () => {
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)