Update using-styled-components.mdx

getsentry · Sep 19, 2024 · db7193f · db7193f
1 parent 6a29c54
commit db7193f
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