# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://olga-f.gitbook.io/react/next-js/styling-in-next.js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.