什么是解析错误:模板中的转义序列无效?

Question

<style jsx>{`
#x {                      
text-align: center;     
font-weight: 900;       
font-size: xx-large;    
margin-bottom: 30px;    
color: #f4511e;         
}
`}</style>

当我在终端输入"npm start"时，终端显示此警告; 截图

Answer 1

我在谷歌上做了一些研究，没有发现 id 选择器用于样式化的 jsx，但我到处都看到使用类选择器。您可以按照此示例进行操作：

function Home() {
return (
<div className="container">
<h1>Hello Next.js</h1>
<Widget />
<style jsx>{`
.container {
margin: 50px;
}
.container :global(.btn) {
background: #000;
color: #fff;
}
`}</style>
</div>
)
}
export default Home