next.js - 为什么不应用 JSX CSS？

Question

我正在处理 Next.js 网站上“学习”部分的文档。如果使用 jsx 样式标签，则下面的 CSS 不会应用于组件；但是，如果我将 CSS 添加为对象文字属性，它将被应用。如何获取要应用的 jsx 样式标签 CSS？

这将不适用：

import Layout from "../components/Layout";

export default function Post() {
  return (
    <Layout>
      <div className="container"> This is a div. <div/>


// This wont be applied
      <style jsx>{`
        .container {
            margin: 20;
            padding: 20;
            border: "1px solid #DDD;
        }
      `}</style>
    </Layout>
  );
}

但这有效：

import Layout from "../components/Layout";

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: "1px solid #DDD"
};

export default function Post() {
  return (
    <Layout>
      <div className="container" style={layoutStyle}> This is a div. <div/>
    </Layout>
  );
}

Answer 1

尝试这个：

  <style>{`
     .container {
        margin: 20;
        padding: 20;
        border: 1px solid #DDD;
     }
   `}</style>

Answer 2

使用 object 属性时，不提供单位，并且边框字段值用引号引起来。

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: "1px solid #DDD"
};

为了让它与 JSX CSS 一起工作，它需要是普通的 CSS 语法！

.container {
     margin: 20px;
     padding: 20px;
     border: 1px solid #DDD;
}

Answer 3

如果您在网站上使用下一个 js，这不是一个好方法。您应该在项目中使用下一个易于使用和维护 CSS 文件的 CSS。这是使用下一个 css 的文档链接。

https://github.com/zeit/next-plugins/tree/master/packages/next-css