useStyleTag

类别

Browser

导出大小

610 B

最近修改

4 weeks ago

在头部注入响应式 style 元素。

🌐 Inject reactive style element in head.

示例

源代码在线运行

Edit CSS: .demo { background: #ad4c2e50; } .demo textarea { background: lightyellow; }

ID: vueuse_styletag_1

Loaded: false

用法

🌐 Usage

基本用法

🌐 Basic usage

提供一个 CSS 字符串，然后 useStyleTag 会自动生成一个 id 并注入到 <head> 中。

🌐 Provide a CSS string, then useStyleTag will automatically generate an id and inject it in <head>.

import { useStyleTag } from '@vueuse/core'

const {
  id,
  css,
  load,
  unload,
  isLoaded,
} = useStyleTag('.foo { margin-top: 32px; }')

// Later you can modify styles
css.value = '.foo { margin-top: 64px; }'

此代码将被注入到 <head>：

🌐 This code will be injected to <head>:

<style id="vueuse_styletag_1">
  .foo {
    margin-top: 64px;
  }
</style>

自定义 ID

🌐 Custom ID

如果你需要定义自己的 ID，可以将 id 作为第一个参数传入。

🌐 If you need to define your own id, you can pass id as first argument.

TypeScript

useStyleTag('.foo { margin-top: 32px; }', { id: 'custom-id' })

'use strict'
useStyleTag('.foo { margin-top: 32px; }', { id: 'custom-id' })

<!-- injected to <head> -->
<style id="custom-id">
  .foo {
    margin-top: 32px;
  }
</style>

媒体查询

🌐 Media query

你可以将媒体属性作为对象中的最后一个参数传递。

🌐 You can pass media attributes as last argument within object.

TypeScript

useStyleTag('.foo { margin-top: 32px; }', { media: 'print' })

'use strict'
useStyleTag('.foo { margin-top: 32px; }', { media: 'print' })

<!-- injected to <head> -->
<style id="vueuse_styletag_1" media="print">
  .foo {
    margin-top: 32px;
  }
</style>