Next.JS + AMP CSS

2023-12-25

我在 Next.js 中使用 AMP 和 CSS 时遇到问题。在我的头部组件中,我有:

<Head>
    <style amp-custom>{`
        // CSS Here
    `}</style>
</Head>

在 HTML 源代码中,它显示为<style amp-custom=""></style><style>(CSS Here)</style>

在控制台中我收到此错误:The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.

如何在 CSS 和 Next 上使用 AMPHTML 规则?我尝试过的所有其他方法(例如使用 @zeit/next-sass 从文件导入)都会导致 CSS 根本无法渲染。这是我发现的唯一有效版本。


尝试这个:

<Head>
    <style
      amp-custom=""
      dangerouslySetInnerHTML={{
        __html: `
          amp-img {
            border: 1px solid black;
          }
        `,
      }}
    ></style>
</Head>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Next.JS + AMP CSS 的相关文章

  • 避免滚轮被嵌入的 youtube / flash 视频劫持

    我正在对主页中嵌入 YouTube 视频的网站进行一些改进 我自己没有添加此代码 但它看起来像
  • 纯CSS代码,没有绝对定位

    我试图想出一个纯CSS代码 就像你在电视上看到的那样 仅not粘在屏幕底部 我已经找到了涉及 JS 的东西 但我正在努力避免 JS 我还发现了一些其他人创建的纯 CSS 代码 但这些的问题在于它们都使用position absolute 这
  • React:设置 State 或设置 Prop 而无需重新渲染

    Problem 目前 我有一个LoginForm具有 成功 处理函数的组件handleOnSuccess 然后将其链接到父组件onTokenUpdate由 令牌更新 处理函数定义的属性handleUpdateToken 问题是setStat
  • 通过 Javascript 填充 ReactJS HTML 表单

    我正在开发一个应用程序 在打开第 3 方网站后 我可以在浏览器上下文中运行我自己的 Javascript 作为一个基于reactjs构建并具有登录表单的示例网站 您可以参考此链接 我正在尝试在reactjs生成的表单中填写用户名和密码 但是
  • 当CSS文件存在时,无法在服务器上找到它们[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 当运行本地服务器时 这一切都运行良好 我有 header html 其中包含以下代码 在 public html 目录 与 header h
  • 如何使用 Typescript 将 jest.spyOn 与 React 函数组件一起使用

    我正在使用 Typescript 和 hooks 开发一个 React 应用程序 并且尝试使用 Enzyme 和 Jest 来测试功能组件 我无法使用 jest spyOn 来测试我的组件中的方法 jest spyOn 方法无法正确解析并在
  • 通过 css 或 javascript 查找当前工作浏览器是否为 safari

    我研究了如何识别浏览器是否是 Safari 在javascript window devicePixelRatio对于 chrome 和 safari 对象都给出 1 在CSS media screen and webkit min dev
  • 带填充的 Tailwind CSS 导航悬停下拉菜单

    我正在尝试展示子 ul 当项目悬停时 在第一个导航项目上列出 一切正常 除了有时 时好时坏 当您位于第一行的填充之间时 ul 项目和子项目 ul 项目 次要项目 ul 会消失 当我从下拉菜单导航到项目列表时 如何保持辅助导航列表打开 JSF
  • 图像下方不需要的边距

    我有一个图像和一个 div 我想将其放置在其下方 这是小提琴 http jsfiddle net d3Mne 1 http jsfiddle net d3Mne 1 问题是两者之间存在差距 此下边距仅出现在图像中 有什么办法可以去除吗 Se
  • Next.js TypeScript 错误:您没有安装所需的软件包[重复]

    这个问题在这里已经有答案了 我目前正在他们方便的 typescript starter 的帮助下构建一个基本的 nextjs 网站 使用开发时一切都运行顺利yarn dev直到大约 20 分钟前 每当我尝试运行时 我都会随机收到一条错误消息
  • CSS 变换源不能与 translate() 一起使用

    我想将 div 从中心点移开 但似乎translate 不关心变换原点是什么 并使用元素的左上角来移动它 这是一个测试来证实这一点 div class items div class item 1 style width 100px hei
  • 将 useRef 挂钩传递给 ref 属性的正确方法

    我不确定如何更明确地提出这个问题 但它是关于值传递 and 引用传递反应中的情况 还有胡克斯 我正在使用 gsap 来制作 div 滑入和滑出的动画 这是其上下文 但我猜测 ref 的用途并不重要 因此 这工作得很好 尽管这是一种更典型的类
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • 是否可以在没有 Javascript(仅 CSS)的情况下执行相同的操作(悬停效果)?

    我正在尝试创建一个带有图标的按钮像这样 http jsfiddle net pRdMc HTML div div class icon div span Send Email span div CSS button width 270px
  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之
  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 如何更改 Shiny 中 navbarPage 折叠的断点

    我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时 将导航元素折叠到菜单中 默认情况下 当浏览器宽度小于 940 像素时会触发折叠 有什么方法可以改变这一点 以便在稍大的浏

随机推荐