如何解决<style>中的字符在跨域请求中转换为Unicode HTML实体
在我的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} />
</>
),}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。