Skip to content

Commit 4e71121

Browse files
TimerLuis Alvarez D.
Timer
and
Luis Alvarez D.
authored
Add New CSS Documentation (vercel#10072)
* Restructure CSS Doc * docs for stylesheets and css modules * Add production note * add or * linebreaks * Revise docs * Update docs/basic-features/built-in-css-support.md Co-Authored-By: Luis Alvarez D. <luis@zeit.co> Co-authored-by: Luis Alvarez D. <luis@zeit.co>
1 parent 9f6fdb9 commit 4e71121

File tree

1 file changed

+115
-31
lines changed

1 file changed

+115
-31
lines changed

‎docs/basic-features/built-in-css-support.md

Lines changed: 115 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,126 @@
11
---
2-
description: Next.js includes styled-jsx by default for isolated and scoped CSS support, but you can also use any other CSS-in-JS solution!. Learn more here.
2+
description: Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here.
33
---
44

5-
# Built-in CSS Support
5+
# Built-In CSS Support
6+
7+
Next.js allows you to import CSS files from a JavaScript file.
8+
This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript.
9+
10+
## Adding a Global Stylesheet
11+
12+
To add a stylesheet to your application, import the CSS file within `pages/_app.js`.
13+
14+
For example, consider the following stylesheet named `styles.css`:
15+
16+
```css
17+
body {
18+
font-family: 'SF Pro Text', 'SF Pro Icons', system-ui;
19+
padding: 20px 20px 60px;
20+
max-width: 680px;
21+
margin: 0 auto;
22+
}
23+
```
24+
25+
Create a [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app) if not already present.
26+
Then, [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file.
27+
28+
```jsx
29+
import '../styles.css'
30+
31+
// This default export is required in a new `pages/_app.js` file.
32+
export default function MyApp({ Component, pageProps }) {
33+
return <Component {...pageProps} />
34+
}
35+
```
36+
37+
These styles (`styles.css`) will apply to all pages and components in your application.
38+
Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside [`pages/_app.js`](https://nextjs.org/docs/advanced-features/custom-app)**.
39+
40+
In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state.
41+
42+
In production, all CSS files will be automatically concatenated into a single minified `.css` file.
43+
44+
## Adding Component-Level CSS
45+
46+
Next.js supports [CSS Modules](https://github.com/css-modules/css-modules) using the `[name].module.css` file naming convention.
47+
48+
CSS Modules locally scope CSS by automatically creating a unique class name.
49+
This allows you to use the same CSS class name in different files without worrying about collisions.
50+
51+
This behavior makes CSS Modules the ideal way to include component-level CSS.
52+
CSS Module files **can be imported anywhere in your application**.
53+
54+
For example, consider a reusable `Button` component in the `components/` folder:
55+
56+
First, create `components/Button.module.css` with the following content:
57+
58+
```css
59+
/*
60+
You do not need to worry about .error {} colliding with any other `.css` or
61+
`.module.css` files!
62+
*/
63+
.error {
64+
color: white;
65+
background-color: red;
66+
}
67+
```
68+
69+
Then, create `components/Button.js`, importing and using the above CSS file:
70+
71+
```jsx
72+
import styles from './Button.module.css'
73+
74+
export function Button() {
75+
return (
76+
<button
77+
type="button"
78+
// Note how the "error" class is accessed as a property on the imported
79+
// `styles` object.
80+
className={styles.error}
81+
>
82+
Destroy
83+
</button>
84+
)
85+
}
86+
```
87+
88+
CSS Modules are an _optional feature_ and are **only enabled for files with the `.module.css` extension**.
89+
Regular `<link>` stylesheets and global CSS files are still supported.
90+
91+
In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files.
92+
These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
93+
94+
## CSS-in-JS
695

796
<details>
897
<summary><b>Examples</b></summary>
998
<ul>
10-
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/basic-css">Basic CSS</a></li>
99+
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/basic-css">Styled JSX</a></li>
100+
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-styled-components">Styled Components</a></li>
101+
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-styletron">Styletron</a></li>
102+
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-glamor">Glamor</a></li>
103+
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-cxs">Cxs</a></li>
104+
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-aphrodite">Aphrodite</a></li>
105+
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-fela">Fela</a></li>
11106
</ul>
12107
</details>
13108

14-
We bundle [styled-jsx](https://github.com/zeit/styled-jsx) to provide support for isolated scoped CSS. The aim is to support "shadow CSS" similar to Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).
109+
It's possible to use any existing CSS-in-JS solution.
110+
The simplest one is inline styles:
111+
112+
```jsx
113+
function HiThere() {
114+
return <p style={{ color: 'red' }}>hi there</p>
115+
}
116+
117+
export default HiThere
118+
```
119+
120+
We bundle [styled-jsx](https://github.com/zeit/styled-jsx) to provide support for isolated scoped CSS.
121+
The aim is to support "shadow CSS" similar to Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).
122+
123+
See the above examples for other popular CSS-in-JS solutions (like Styled Components).
15124

16125
A component using `styled-jsx` looks like this:
17126

@@ -48,35 +157,10 @@ export default HelloWorld
48157

49158
Please see the [styled-jsx documentation](https://github.com/zeit/styled-jsx) for more examples.
50159

51-
## CSS-in-JS
52-
53-
<details>
54-
<summary><b>Examples</b></summary>
55-
<ul>
56-
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-styled-components">Styled components</a></li>
57-
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-styletron">Styletron</a></li>
58-
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-glamor">Glamor</a></li>
59-
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-cxs">Cxs</a></li>
60-
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-aphrodite">Aphrodite</a></li>
61-
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-fela">Fela</a></li>
62-
</ul>
63-
</details>
64-
65-
It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:
66-
67-
```jsx
68-
function HiThere() {
69-
return <p style={{ color: 'red' }}>hi there</p>
70-
}
71-
72-
export default HiThere
73-
```
74-
75-
## CSS Plugins
160+
## Sass, Less, and Stylus Support
76161

77-
To support importing `.css`, `.scss`, `.less` or `.styl` files you can use the following modules, which configure sensible defaults for server rendered applications:
162+
To support importing `.scss`, `.less` or `.styl` files you can use the following plugins:
78163

79-
- [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css)
80164
- [@zeit/next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
81165
- [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
82166
- [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy