Update styling.md guide (#30594)

contribute/style-guides/styling.md

@@ -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.
 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
 ```tsx
 import React, { FC } from 'react';
 import React, { FC } from 'react';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '@grafana/ui';
 import { useStyles } from '@grafana/ui';
 import { css } from 'emotion';
 import { css } from 'emotion';
 
 
-const getComponentStyles = (theme: GrafanaTheme) => css`
-  padding: ${theme.spacing.md};
-`;
-
 const Foo: FC<FooProps> = () => {
 const Foo: FC<FooProps> = () => {
-  const styles = useStyles(getComponentsStyles);
+  const styles = useStyles(getStyles);
+
+  // Use styles with classNames
+  return <div className={styles}>...</div>
 
 
-  // Use styles with className
 };
 };
+
+const getStyles = (theme: GrafanaTheme) => css`
+  padding: ${theme.spacing.md};
+`;
 ```
 ```
 
 
 ### Styling complex components
 ### 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.
 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
 ```tsx
 import React from 'react';
 import React from 'react';
@@ -56,22 +60,13 @@ import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant, stylesFactory, useTheme } from '@grafana/ui';
 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);
-
-  return {
-    wrapper: css`
-      background: ${backgroundColor};
-    `,
-    icon: css`
-      font-size: ${theme.typography.size.sm};
-    `,
-  };
-});
+interface ComponentAProps {
+  isActive: boolean
+}
 
 
-const ComponentA = () => {
+const ComponentA: React.FC<ComponentAProps> = ({isActive}) => {
   const theme = useTheme();
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = getStyles(theme, isActive);
 
 
   return (
   return (
     <div className={styles.wrapper}>
     <div className={styles.wrapper}>
@@ -80,6 +75,21 @@ const ComponentA = () => {
     </div>
     </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`
+      background: ${backgroundColor};
+    `,
+    icon: css`
+      font-size: ${theme.typography.size.sm};
+    `,
+  };
+});
 ```
 ```
 
 
 For more information about themes at Grafana please see the [themes guide](./themes.md).
 For more information about themes at Grafana please see the [themes guide](./themes.md).