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

Update styling.md guide (#30594)

Browse Source
This commit is contained in:
Dominik Prokop
2021-01-25 12:52:22 +01:00
committed by GitHub
parent 0079a275af
commit 951b11a9a5
1 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,28 +27,32 @@ const ComponentA = () => (
To access the theme in your styles, use the `useStyles` hook. It provides basic memoization and access to the theme object.
> Please remember to put `getStyles` function at the end of the file!
```tsx
import React, { FC } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { useStyles } from '@grafana/ui';
import { css } from 'emotion';
const getComponentStyles = (theme: GrafanaTheme) => css`
const Foo: FC<FooProps> = () => {
const styles = useStyles(getStyles);
// Use styles with classNames
return <div className={styles}>...</div>
};
const getStyles = (theme: GrafanaTheme) => css`
padding: ${theme.spacing.md};
`;
const Foo: FC<FooProps> = () => {
const styles = useStyles(getComponentsStyles);
// Use styles with className
};
```
### Styling complex components
In more complex cases, especially when you need to style multiple DOM elements in one component, or when using styles that depend on properties and/or state, you should create a helper function that returns an object of styles. This function should also be wrapped in the `stylesFactory` helper function, which will provide basic memoization.
Let's say you need to style a component that has a different background depending on the theme:
Let's say you need to style a component that has a different background depending on the `isActive` property :
```tsx
import React from 'react';
@@ -56,8 +60,26 @@ import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant, stylesFactory, useTheme } from '@grafana/ui';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const backgroundColor = selectThemeVariant({ light: theme.colors.red, dark: theme.colors.blue }, theme.type);
interface ComponentAProps {
isActive: boolean
}
const ComponentA: React.FC<ComponentAProps> = ({isActive}) => {
const theme = useTheme();
const styles = getStyles(theme, isActive);
return (
<div className={styles.wrapper}>
As red as you can get
<i className={styles.icon} />
</div>
);
};
// Mind, that you can pass multiple arguments, theme included
const getStyles = stylesFactory((theme: GrafanaTheme, isActive: boolean) => {
const backgroundColor = isActive ? theme.colors.red : theme.colors.blue;
return {
wrapper: css`
@@ -68,18 +90,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`,
};
});
const ComponentA = () => {
const theme = useTheme();
const styles = getStyles(theme);
return (
<div className={styles.wrapper}>
As red as you can get
<i className={styles.icon} />
</div>
);
};
```
For more information about themes at Grafana please see the [themes guide](./themes.md).