useStyleTag

リアクティブな style 要素を head に挿入します。

使用法

基本的な使用法

CSS文字列を提供すると、useStyleTag が自動的にIDを生成し、<head> に挿入します。

import { useStyleTag } from '@vueuse/core'

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

// 後でスタイルを変更することができます
css.value = '.foo { margin-top: 64px; }'

このコードは <head> に挿入されます:

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

カスタムID

独自のIDを定義する必要がある場合は、id を最初の引数として渡すことができます。

import { useStyleTag } from '@vueuse/core'
// ---cut---
useStyleTag('.foo { margin-top: 32px; }', { id: 'custom-id' })

<!-- <head> に挿入されます -->
<style id="custom-id">
  .foo {
    margin-top: 32px;
  }
</style>

メディアクエリ

オブジェクト内の最後の引数としてメディア属性を渡すことができます。

import { useStyleTag } from '@vueuse/core'
// ---cut---
useStyleTag('.foo { margin-top: 32px; }', { media: 'print' })

<!-- <head> に挿入されます -->
<style id="vueuse_styletag_1" media="print">
  .foo {
    margin-top: 32px;
  }
</style>

※このページは Nuxt.js 公式ドキュメントの翻訳ページです。

公式ドキュメントの該当ページはこちら：
#