How to style Next JS

Next.js uses React, you can use any other mechanism that works with React to style your apps.

Next.js has built-in support for CSS and Sass which allows you to import .css and .scss files.

Next.js includes Styled JSX by default, but you can also use other popular CSS-in-JS libraries such as styled-components or emotion.

Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components.

Next.js example app with styletron

In order to use Base Web, you need to do a small setup and wrap the root of your application with StyletronProvider and BaseProvider components.

import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider, styled} from 'baseui';
import {StatefulInput} from 'baseui/input';
const engine = new Styletron();
const Centered = styled('div', {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%',
});
export default function Hello() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <Centered>
          <StatefulInput />
        </Centered>
      </BaseProvider>
    </StyletronProvider>
  );
}

Next.js example app with styled-components