为什么不应用 JSX CSS？答案

【问题标题】：Why won't the JSX CSS be applied?为什么不应用 JSX CSS？
【发布时间】：2022-02-16 13:04:06
【问题描述】：

我正在处理 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.js styled-jsx

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：