Docs: Fix examples, grammar, add links (#22406)

- Fix examples: syntax errors, formatting
- Add links to referenced Emotion documentation
- Fix grammar, punctuation
- Update headings: Remove top-level "Emotion", adjust others

contribute/style-guides/styling.md

@@ -1,48 +1,55 @@
 # Styling Grafana
 
-## Emotion
-
 [Emotion](https://emotion.sh/docs/introduction) 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
+## Usage
 
-#### Basic styling
+### Basic styling
 
-For styling components use Emotion's `css` function
+For styling components, use [Emotion's `css` function](https://emotion.sh/docs/emotion#css).
 
 ```tsx
+import React from 'react';
 import { css } from 'emotion';
 
-
+const ComponentA = () => (
-const ComponentA = () => {
+  <div
-  return (
+    className={css`
-    <div className={css`background: red;`}>
+      background: red;
-      As red as you can ge
+    `}
+  >
+    As red as you can get
   </div>
-  );
+);
-}
 ```
 
-#### Styling complex components
+### 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. This function should also be wrapped in `stylesFactory` helper function that 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 different background depending on the theme:
+Let's say you need to style a component that has a different background depending on the theme:
 
 ```tsx
-import { css, cx }  from 'emotion';
+import React from 'react';
-import { GrafanaTheme, useTheme, selectThemeVariant, stylesFactory } from '@grafana/ui';
+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);
+  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}`;
+    icon: css`
+      font-size: ${theme.typography.size.sm};
+    `,
   };
-}
+});
 
 const ComponentA = () => {
   const theme = useTheme();
@@ -54,19 +61,19 @@ const ComponentA = () => {
       <i className={styles.icon} />
     </div>
   );
-});
+};
 ```
 
-For more information about themes at Grafana please see [themes guide](./themes.md)
+For more information about themes at Grafana please see the [themes guide](./themes.md).
 
-#### Composing class names
+### Composing class names
 
-For class composition use Emotion's `cx` function
+For class composition, use [Emotion's `cx` function](https://emotion.sh/docs/emotion#cx).
 
 ```tsx
+import React from 'react';
 import { css, cx } from 'emotion';
 
-
 interface Props {
   className?: string;
 }
@@ -74,13 +81,11 @@ interface Props {
 const ComponentA: React.FC<Props> = ({ className }) => {
   const finalClassName = cx(
     className,
-    css`background: red`,
+    css`
-  )
+      background: red;
-
+    `
-  return (
-    <div className={finalClassName}>
-      As red as you can ge
-    </div>
   );
-}
+
+  return <div className={finalClassName}>As red as you can ge</div>;
+};
 ```