diff --git a/develop-docs/frontend/using-styled-components.mdx b/develop-docs/frontend/using-styled-components.mdx index 9204e920d4ca6..0b6f16a5708ce 100644 --- 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 ( + +

a number: 1

+

and another: 2

+
+ ) +} + 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 ( - -

a number: 1

-

and another: 2

-
- ) -} ``` ## Theme