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.
 
+> 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`
-  padding: ${theme.spacing.md};
-`;
-
 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
 
 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,22 +60,13 @@ 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);
-
-  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 styles = getStyles(theme);
+  const styles = getStyles(theme, isActive);
 
   return (
     <div className={styles.wrapper}>
@@ -80,6 +75,21 @@ const ComponentA = () => {
     </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).