使用CSS对Next.js组件进行样式设计的方法

如何在Next.js中为React组件设计样式？

我们如何在Next.js中设计React组件的样式？

我们有很大的自由，因为我们可以使用任何我们喜欢的库。

但Next.js自带 styled-jsx内置的，因为那是一个由从事Next.js的人建立的库。

而且，这是一个相当酷的库，它为我们提供了范围内的CSS，这对可维护性非常好，因为CSS只影响它所应用的组件。

我认为这是一个写CSS的好方法，不需要应用额外的库或预处理器来增加复杂性。

要在Next.js中为React组件添加CSS，我们要在JSX的一个片段中插入CSS，该片段以

结尾为

在这个奇怪的块里面，我们写普通的CSS，就像我们在.css 文件一样。

<style jsx>{`
  h1 {
    font-size: 3rem;
  }
`}</style>

你把它写在JJSX里面，像这样。

const Index = () => (
  <div>
		<h1>Home page</h1>

		<style jsx>{`
		  h1 {
		    font-size: 3rem;
		  }
		`}</style>
  </div>
)

export default Index

在块里面我们可以使用插值来动态改变数值。例如，在这里我们假设一个size 的道具是由父组件传递的，我们在styled-jsx 块中使用它。

const Index = props => (
  <div>
		<h1>Home page</h1>

		<style jsx>{`
		  h1 {
		    font-size: ${props.size}rem;
		  }
		`}</style>
  </div>
)

如果你想在全局范围内应用一些CSS，而不是局限于某个组件，你可以在style 标签中添加global 关键字。

<style jsx global>{`
body {
  margin: 0;
}
`}</style>

如果你想在Next.js组件中导入一个外部CSS文件，你必须先安装@zeit/next-css 。

npm install @zeit/next-css

然后在项目的根部创建一个配置文件，称为next.config.js ，其中包含这一内容。

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

重新启动Next应用程序后，你就可以像平时使用JavaScript库或组件那样导入CSS了。

你也可以直接导入一个SASS文件，用 @zeit/next-sass库来代替。