> For the complete documentation index, see [llms.txt](https://olga-f.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://olga-f.gitbook.io/react/next-js/styling-in-next.js.md).

# How to style Next JS

 Next.js has [built-in support for CSS](https://nextjs.org/docs/basic-features/built-in-css-support) and Sass which allows you to import `.css` and `.scss` files.

Next.js includes [Styled JSX](/react/design-systems/styled-jsx.md) by default, but you can also use other popular CSS-in-JS libraries such as [styled-components](/react/design-systems/styled-components.md) or [emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion). 

[Styled JSX](https://github.com/vercel/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](https://github.com/vercel/next.js/tree/canary/examples/with-styletron)

In order to use [Base Web](/react/design-systems/base-web.md), you need to do a small setup and wrap the root of your application with `StyletronProvider` and [`BaseProvider`](https://baseweb.design/components/base-provider) components.

```jsx
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](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)