Local Styles
NextWeb.js uses Emotion for styling. The combining of css
prop and Object Styles
make styling in react application super simple. No more imports!
function MainLayout({ children }) {
return (
<div css={{ maxWidth: 960, margin: '0 auto' }}>
<main>{children}</main>
</div>
)
}
To make it works, we have to add this babel preset.
{
"presets": ["@emotion/babel-preset-css-prop"]
}
Fortunately, NextWeb.js do it for you. All you have to do is to write some styles and see the document from emotion.