工具介绍
完全支持 CSS，对 JSX 不做任何妥协
# styled-jsx
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](https://github.com/vercel/styled-jsx/tree/v2).
- [Getting started](#getting-started)
- [Configuration options](#configuration-options)
- [`optimizeForSpeed`](#optimizeforspeed)
- [`sourceMaps`](#sourcemaps)
- [`styleModule`](#stylemodule)
- [`vendorPrefixes`](#vendorprefixes)
- [Features](#features)
- [How It Works](#how-it-works)
- [Why It Works Like This](#why-it-works-like-this)
- [Targeting The Root](#targeting-the-root)
- [Global styles](#global-styles)
- [One-off global selectors](#one-off-global-selectors)
- [Dynamic styles](#dynamic-styles)
- [Via interpolated dynamic props](#via-interpolated-dynamic-props)
- [Via `className` toggling](#via-classname-toggling)
- [Via inline `style`](#via-inline-style)
- [Constants](#constants)
- [Server-Side Rendering](#server-side-rendering)
- [External CSS and styles outside of the component](#external-css-and-styles-outside-of-the-component)
- [External styles](#external-styles)
- [Styles outside of components](#styles-outside-of-components)
- [The `resolve` tag](#the-resolve-tag)
- [Styles in regular CSS files](#styles-in-regular-css-files)
- [CSS Preprocessing via Plugins](#css-preprocessing-via-plugins)
- [Plugin options](#plugin-options)
- [Example plugins](#example-plugins)
- [Rendering in tests](#rendering-in-tests)
- [FAQ](#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?](#can-i-return-an-array-of-components-when-using-react-16)
- [Styling third parties / child components from the parent](#styling-third-parties--child-components-from-the-parent)
- [Some styles are missing in production](https://github.com/vercel/styled-jsx/issues/319#issuecomment-349239326)
- [Build a component library with styled-jsx](#build-a-component-library-with-styled-jsx)
- [Syntax Highlighting](#syntax-highlighting)
- [ESLint](#eslint)
- [TypeScript](#typescript)
- [Credits](#credits)
## Getting started
Firstly, install the package:
```bash
npm install --save styled-jsx
```
Next, add `styled-jsx/babel` to `plugins` in your babel configuration:
```json
{
"plugins": ["styled-jsx/babel"]
}
```
Now add `
)
```
New styles' injection is optimized to perform well at runtime.
That said when your CSS is mostly static we recommend to split it up in static and dynamic styles and use two separate `style` tags so that, when changing, only the dynamic parts are recomputed/rendered.
```jsx
const Button = props => (
{props.children}
)
```
#### Via `className` toggling
The second option is to pass properties that toggle class names.
```jsx
const Button = props => (
{props.children}
)
```
Then you would use this component as either `Hi` or `Big`.
#### Via inline `style`
\***best for animations**
Imagine that you wanted to make the padding in the button above completely customizable. You can override the CSS you configure via inline-styles:
```jsx
const Button = ({ padding, children }) => (
{children}
)
```
In this example, the padding defaults to the one set in `
)
```
…
```
jsx
import React from 'react'
import ReactDOM from 'react-dom/server'
import { StyleRegistry, useStyleRegistry } from 'styled-jsx'
import App from './app'
function Styles() {
const registry = useStyleRegistry()
const styles = registry.styles()
return <>{styles}</>
}
export default (req, res) => {
const app = ReactDOM.renderToString()
const html = ReactDOM.renderToStaticMarkup(
)
```
N.B. All the tags except for [`resolve`](#the-resolve-tag) don't support dynamic styles.
`resolve` and `global` can also be imported individually:
```js
import { resolve } from 'styled-jsx/css'
import { global } from 'styled-jsx/css'
```
If you use Prettier we recommend you to use the default `css` export syntax since the tool doesn't support named imports.
#### Styles outside of components
The `css` tag from `styled-jsx/css` can be also used to define styles in your components files but outside of the component itself. This might help with keeping `render` methods smaller.
```jsx
import css from 'styled-jsx/css'
export default () => (
)
const button = css`
button {
color: hotpink;
}
`
```
Like in externals styles `css` doesn't work with dynamic styles. If you have dynamic parts you might want to place them inline inside of your component using a regular `