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`
+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) => {
+interface ComponentAProps {
-  const backgroundColor = selectThemeVariant({ light: theme.colors.red, dark: theme.colors.blue }, theme.type);
+  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).