Styled JSX

Next by default comes with styled-jsx. Styled-jsx is a perfect css-in-js solution that has many features like

• Source Maps
• Server side rendering
• Isolation of selectors, animations and keyframes
• CSS Preprocessing via plugins and more...

For more information about how to use styled-jsx, please read the Readme on the styled-jsx repo.

styled-components

styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

  import React from 'react';

  import styled from 'styled-components';

  // Create a <Title> react component that renders an <h1> which is
  // centered, palevioletred and sized at 1.5em
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;

  // Create a <Wrapper> react component that renders a <section> with
  // some padding and a papayawhip background
  const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
  `;

  // Use them like any other React component – except they're styled!
  <Wrapper>
    <Title>Hello World!</Title>
  </Wrapper>