Vue3 スタイルの新機能とその使用方法について

新しいスタイル機能

Vue3.2 バージョンでは、ローカル スタイルなどの単一ファイル コンポーネントのスタイルに多くのアップグレードが加えられています。 CSS 変数とスタイルは、テンプレートの使用などのために公開されます。 (学習ビデオ共有: vue ビデオ チュートリアル)

1. 部分的なスタイル

<style> タグが scoped# # の場合# 属性の場合、その CSS は現在のコンポーネントの要素にのみ適用されます:

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

2。深さセレクター

は

scoped## にあります #スタイルのセレクターでより「深い」選択を行う場合、つまりサブコンポーネントに影響を与える場合は、:deep() この疑似クラス: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;style scoped&gt; .a :deep(.b) { /* ... */ } &lt;/style&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div># を使用できます。

#v-html

で作成された DOM コンテンツはスコープ付きスタイルの影響を受けませんが、深さセレクターを使用してスタイルを設定することはできます。

3. スロット セレクター

デフォルトでは、スコープ スタイルは

レンダリングされたコンテンツに影響しません。は、親コンポーネントによって保持され、渡されると見なされます。

:slotted 疑似クラスを使用して、スロットのコンテンツをセレクターとして正確にターゲットにします:

<style scoped>
:slotted(div) {
  color: red;
}
</style>

4. グローバル セレクター

スタイル ルールの 1 つをグローバルに適用するには、別の <style>

を作成する代わりに、

:global 疑似クラスを使用できます:

<style scoped>
:global(.red) {
  color: red;
}
</style>

5ローカル スタイルとグローバル スタイルの混合

#同じコンポーネントにスコープ付きスタイルとスコープなしスタイルの両方を含めることもできます:

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

6. CSS モジュールのサポート