<style>中的字符在跨域请求中转换为Unicode HTML实体

问题描述

我有一个使用react-jss的NextJS应用程序。

在我的CSS中，我有针对'& .working[style="display: block;"] ': {...}

的规则

当我在运行服务器的同一域上访问页面时，我可以构建，运行并看到此功能正常运行，并且我有许多单独的<style>标签，如下所示：

<style data-jss="" data-Meta="Themed">...</style>
<style data-jss="" data-Meta="Themed">...</style>
...

但是，当我访问另一个域（或通过邮递员）提供的同一页面时，我看到相关规则已将"字符替换为"，因此看起来.working[style="display: block;"]（这不限于"-该规则后面的>被>取代）。样式也都在单个<style>标签下提供：

<style id="server-side-styles">...</styles>

应用程序没有做任何花哨的工作，样式添加到_document.js中，如下所示：https://github.com/vercel/next.js/blob/canary/examples/with-react-jss/pages/_document.js

我不认为这是NextJS或react-jss问题，因为当我检查服务器上的字符串化注册表时（通过Postman发出请求时），我仍然看到最初编写的样式，没有字符转换。

是否存在与CORS或跨域请求相关的东西，这些东西会导致"以此方式替换为"？如果是，我该如何预防？如果没有，我是否缺少明显的东西？

解决方法

使用您链接的示例，在此行：

<style id="server-side-styles">{registry.toString()}</style>

您需要使用React的dangerouslySetInnerHTML约定，否则，您返回的字符串将像您所看到的那样被转义。

每个示例链接的_document.js如下所示：

import Document from 'next/document'
import { SheetsRegistry,JssProvider,createGenerateId } from 'react-jss'

export default class JssDocument extends Document {
  static async getInitialProps(ctx) {
    const registry = new SheetsRegistry()
    const generateId = createGenerateId()
    const originalRenderPage = ctx.renderPage
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => (
          <JssProvider registry={registry} generateId={generateId}>
            <App {...props} />
          </JssProvider>
        ),})

    const initialProps = await Document.getInitialProps(ctx)
    const rawStyles = {
      __html: registry.toString(),}

    return {
      ...initialProps,styles: (
        <>
          {initialProps.styles}
          <style id="server-side-styles" dangerouslySetInnerHTML={rawStyles} />
        </>
      ),}
  }
}