d1fdd2bbf8
* Added descriptions * Added descriptions to API Reference * Added descriptions to API Routes * Added descriptions to basic features * Added descriptions to the routing docs * Update exportPathMap.md Co-authored-by: Joe Haddad <timer150@gmail.com>
2.7 KiB
2.7 KiB
| 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. |
Built-in CSS Support
Examples
We bundle 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.
A component using styled-jsx looks like this:
function HelloWorld() {
return (
<div>
Hello world
<p>scoped!</p>
<style jsx>{`
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
`}</style>
<style global jsx>{`
body {
background: black;
}
`}</style>
</div>
)
}
export default HelloWorld
Please see the styled-jsx documentation for more examples.
CSS-in-JS
It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:
function HiThere() {
return <p style={{ color: 'red' }}>hi there</p>
}
export default HiThere
CSS Plugins
To support importing .css, .scss, .less or .styl files you can use the following modules, which configure sensible defaults for server rendered applications: