styled-jsx 5.1.2

Styled-jsx is a lightweight library developed by Vercel providing complete foolproof CSS support for your JSX files (React components). It enables isolated component-friendly CSS support for both server-rendered and client-rendered applications. The library ensures complete CSS isolation by applying unique classnames to your styles. It leverages the CSSOM APIs for a blazing fast CSS rules injection system and fully supports CSS source maps. Additionally, you get automatic vendor prefixing and dynamic styles and themes support with Styled-jsx, keeping your codebase future-proof. The runtime size of Styled-jsx is only 3kb, making it a preference for performance-sensitive applications.

To use styled-jsx, first, install it via npm by running npm install --save styled-jsx from your terminal. After installing the package, add styled-jsx/babel to plugins in your babel configuration:

{
  "plugins": ["styled-jsx/babel"]
}

Styled-jsx allows you to write isolated CSS code inside your components using <style jsx> tags. For instance:

export default () => (
  <div>
    <p>only this paragraph will get the style :)</p>

    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

In the above example, the p tag inside the div will get the style specified in <style jsx>.

Complete styled-jsx documentation and usage is available in the GitHub repo at https://github.com/vercel/styled-jsx. This documentation includes getting started instructions, configuration options, features, usage details, and more.