Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).

Code and docs are for v3 which we highly recommend you to try. Looking for styled-jsx v2? Switch to the v2 branch.

- Getting started

- Configuration options

  - [optimizeForSpeed](#optimizeforspeed)

  - [sourceMaps](#sourcemaps)

  - [styleModule](#stylemodule)

  - [vendorPrefixes](#vendorprefixes)

- Features

- How It Works

  - Why It Works Like This

- Targeting The Root

- Global styles

  - One-off global selectors

- Dynamic styles

  - Via interpolated dynamic props

  - [Via className toggling](#via-classname-toggling)

  - [Via inline style](#via-inline-style)

- Constants

- Server-Side Rendering

- External CSS and styles outside of the component

  - External styles

  - Styles outside of components

  - [The resolve tag](#the-resolve-tag)

  - Styles in regular CSS files

- CSS Preprocessing via Plugins

  - Plugin options

  - Example plugins

- Rendering in tests

- FAQ

  - [Warning: unknown jsx prop on <style> tag](#warning-unknown-jsx-prop-on-style-tag)

  - Can I return an array of components when using React 16?

  - Styling third parties / child components from the parent

  - Some styles are missing in production

  - Build a component library with styled-jsx

- Syntax Highlighting

- ESLint

- TypeScript

- Credits

Firstly, install the package:

Next, add styled-jsx/babel to plugins in your babel configuration: