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>
  );
}

标签： next.jsstyled-jsx

Answer 1

尝试这个：

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