grafana/style_guides/styling.md

Styling Grafana

Emotion

Emotion is our default-to-be approach to styling React components. It provides a way for styles to be a consequence of properties and state of a component.

Usage

Basic styling

For styling components use Emotion's css function

import { css }  from 'emotion';


const ComponentA = () => {
  return (
    <div className={css`background: red;`}>
      As red as you can ge
    </div>
  );
}

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:

import { css, cx }  from 'emotion';
import { GrafanaTheme, useTheme, selectThemeVariant } from '@grafana/ui';

const getStyles = (theme: GrafanaTheme) => {
  const backgroundColor = selectThemeVariant({ light: theme.colors.red, dark: theme.colors.blue }, theme.type);

  return {
    wrapper: css`
      background: ${backgroundColor};
    `,
    icon: css`font-size:${theme.typography.size.sm}`;
  };
}

const ComponentA = () => {
  const theme = useTheme();
  const styles = getStyles(theme);

  return (
    <div className={styles.wrapper}>
      As red as you can ge
      <i className={styles.icon} /\>
    </div>
  );
}

For more information about themes at Grafana please see themes guide

Composing class names

For class composition use Emotion's cx function

import { css, cx }  from 'emotion';


interface Props {
  className?: string;
}

const ComponentA: React.FC<Props> = ({ className }) => {
  const finalClassName = cx(
    className,
    css`background: red`,
  )

  return (
    <div className={finalClassName}>
      As red as you can ge
    </div>
  );
}