element-plus コンポーネントを使用して、日付ピッカーのデフォルトのスタイルを変更します。

深さセレクターを使用して、サブコンポーネントのスタイルを変更します。今日、要件に遭遇しました。el-drawer に埋め込まれた el-date-picker には、深さセレクターの使用法がもう一度要約されています。要件は次のとおりです:

template内容：

<el-drawer size="70%" v-model="drawer" title="选择年份" :show-close="false" direction="rtl">
   <el-date-picker v-model="selectedDate"  :disabledDate="disabledDate" type="year" placeholder="选择年"></el-date-picker>
</el-drawer>

lessとスコープを使用したCSS は次のとおりです。

.el-input__inner{
    font-size: 26px;
}

目的は、選択した年のサイズを 26px のサイズで表示されるように変更することです。その結果、コードが実行され、その結果は次のようになります。

表示される年のフォントサイズが大きくなっていないことがわかりました。また、フォントの色と配置を追加して、効果をより明確に確認し、深度セレクターで制御します。次のように変更します。

:deep(.el-input__inner){
    font-size: 26px;
    text-align: center;
    color:rgb(8, 101, 172) ;
}

ランニング効果は以下の通りです。

深さセレクターの使用法を要約すると、次のようになります。

vue コンポーネントのカプセル化の目的は、コンポーネント間の干渉を防ぐことであるため、コンポーネント間の相互干渉の問題は解決されます。しかし同時に、それはいくつかの問題も引き起こします: 子コンポーネントのスタイルを変更する必要がある場合があります。このとき、Vue では、深さセレクターを使用して、親コンポーネント内の子コンポーネントに影響を与えることができます。この問題を解決するために。

CSS はネイティブで深さの表記「>>>」を使用します。
CSSプリコンパイラーを使用する場合、
1. VUE2 では、深さの選択に /deep/ または ::v-deep を使用できます。
2. VUE3 では、深い選択には deep(selector) を使用することをお勧めします。

他にも CSS 関連のオプションがいくつかあります。

:スロット付き()

:slotted(): 子コンポーネントのスタイルスロットコンテンツスタイルを定義します

デフォルトでは、スコープ付きスタイルは親コンポーネントによって保持され渡されると想定されているため、レンダリングされたコンテンツには影響しません <slot/> 。

<template>
  <div>
    <slot>插槽内容，如果外部给出，则替换掉</slot>
  </div>
</template>
 
<style lang="less" scoped>
:slotted(.blue) {
  color: blue;
}
</style>

：グローバル（）

:global() : グローバルセレクター。グローバルスタイルを定義します。スコープのないスタイルを個別に作成する必要はありません。

<style scoped>
:global(.el-input__inner) {
    color: red;
}
</style>
<!-- 等效于 -->
<style>
 .el-input__inner{
     color:red
 }
</style>

動的CSS (v-bind)

vue3 単一ファイルコンポーネントのタグは、CSS 値を動的値にリンクする<style> 使用をサポートしています。つまり、スタイルタグのスクリプトタグに応答性の変数を導入できます。v-bind CSS 函数组件状态

<template>
    <span class='sc'>
        span 内容
    </span>
</template>
 
<script setup>
import { ref } from 'vue';
const redColor = ref('red')
 
</script>
 
<style scoped>
.sc{
    color: v-bind(redColor);
}
</style>

element-plus コンポーネントを使用して、日付ピッカーのデフォルトのスタイルを変更します。

:スロット付き()

：グローバル（）

動的CSS (v-bind)

おすすめ