1.2 KiB
1.2 KiB
样式元素位置
有时你可能希望控制样式元素插入的位置。
例如，如果你使用了 tailwind 的 reset 样式，你不希望它被插入 naive-ui 样式的后面，因为这可能会覆盖按钮等组件的样式。
你可以在 head 元素中加入一个 <meta name="naive-ui-style" /> 元素，naive-ui 会把所有的样式刚好插入这个元素的前面。
同时，naive-ui 依赖 vueuc。如果你需要（通常应该不会），它的样式位置可以通过 <meta name="vueuc-style" /> 控制。
<head>
<xxx />
<!-- naive-ui 的样式会出现在这里 -->
<meta name="naive-ui-style" />
<!-- vueuc 的样式会出现在这里 -->
<meta name="vueuc-style" />
<xxx />
</head>
关于 tailwind 的样式覆盖
你可能会发现在静态 HTML 文件中加入 meta 标签没用（naive 的样式仍然可能被覆盖），因为你的工具链可能永远会把 tailwind 的样式插入 head 的尾部。这种情况下，你需要在 app 挂载之前动态的插入 meta 标签。
const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)
vueApp.mount('#app')