develop: update styled order (#11404)

getsentry · Sep 20, 2024 · cf47272 · cf47272
1 parent 6a29c54
commit cf47272
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/develop-docs/frontend/using-styled-components.mdx b/develop-docs/frontend/using-styled-components.mdx
@@ -9,12 +9,21 @@ The best styles are the ones you don’t write - whenever possible use existing
 
 ## Basics
 
-To use Style Components pull in `styled` and apply your CSS. For consistent spacing you should also use `space()`:
+To use Style Components, import `styled` from `@emotion/styled` and apply custom CSS. For consistent spacing you should also use `space()`:
 
 ```tsx
 import styled from '@emotion/styled';
 import {space} from 'sentry/styles/space';
 
+export default ExampleComponent() {
+  return (
+    <SideBySide>
+      <p>a number: <Numeric>1</Numeric></p>
+      <p>and another: <Numeric>2</Numeric></p>
+    </SideBySide>
+  )
+}
+
 const Numeric = styled('span')`
   font-variant-numeric: tabular-nums;
 `;
@@ -26,14 +35,6 @@ const SideBySide = styled('div')`
   align-items: flex-start;
 `;
 
-export default ExampleComponent() {
-  return (
-    <SideBySide>
-      <p>a number: <Numeric>1</Numeric></p>
-      <p>and another: <Numeric>2</Numeric></p>
-    </SideBySide>
-  )
-}
 ```
 
 ## Theme