スタイル貫通を使用して vue3 プロジェクトの elementUI のデフォルト スタイルを変更する方法

1. スタイルのモジュール化

単一の CSS ファイルで、スタイル タグにコンポーネントのスタイルを記述します。通常、スタイル タグにはスコープ付き属性があり、さまざまなコンポーネントがセレクターは同じですが、スタイルは相互に干渉しません。

例を見てください。両方のコンポーネントで hello-world-box クラスを定義し、対応するスコープ タグに異なる値を設定します。スタイル。

ご覧のとおり、vue はさまざまなコンポーネントのラベルに 一意の属性 (PostCSS 変換実装) を追加します。その後、属性セレクターを使用すると、異なる属性のラベル スタイルが相互に干渉しなくなります。

css 属性セレクターの機能は、特定の属性を持つ HTML 要素のスタイルを設定することです

.hello-world-box[data-v-e17ea971] {
    color: red;
}

これは、スタイルのモジュール化を実現するためのスタイル タグのスコープ属性の原則でもあります。
スタイル タグにスコープ属性がある場合、その CSS スタイルは現在のコンポーネントにのみ適用できます。つまり、スタイルは現在のコンポーネント要素にのみ適用できます。この属性により、コンポーネント間のスタイルが互いに混入するのを防ぐことができます。プロジェクト内のすべてのスタイル タグがスコープ化されている場合、それはスタイルのモジュール化を実現することと同じです。

2. スタイル浸透の実装

vue でのスタイルのモジュール化の実装を理解したら、本題に入りますが、elementUI コンポーネント ライブラリ内のコンポーネントのスタイルをカスタマイズするにはどうすればよいでしょうか?
これは実際には比較的一般的な要件です。一部の UI 図は要素コンポーネント ライブラリのコンポーネントを使用して描画されていないため、スタイルに差異が生じるはずです。
el-table を見てみましょう

ご覧のとおり、要素コンポーネントのスタイルは外部スタイル ファイルを通じて実装されているため、対応するラベル追加属性。
この場合、要素コンポーネントを使用してコンポーネントにスタイルを直接追加しても反映されず、外部からインポートされたスタイル ファイルの方が優先されます。

1. 外部 CSS ファイル

CSS ファイルを自分で定義し、変更する対応するスタイルを記述することができます。
例:styles.css

エントリ ファイル main.js に導入:

注意してください。導入へはこちら 要素CSSファイルとカスタムCSSファイルの導入順序は、CSSスタイルが最初に有効となるためです。

#有効になりました。

しかし、これには実際には問題があります。スタイル ファイルはすべてのコンポーネントに影響します。つまり、このコンポーネントを他のページで呼び出すと、スタイルも変更されます。
解決策の 1 つは、コンポーネントに対応するクラスにカスタム クラス名を追加することです。

2, :deep()

:deep(): CSS 解析時のプライベート属性の位置を変更します

.outer {
  .el-input__inner {
    // 此时css解析的为 .outer .el-input__inner[data-v-xxxx] 样式无效
    background: pink;
  }

  :deep(.el-input__inner) {
    // 此时css解析的为 .outer[data-v-xxxx] .el-input__inner 样式生效
    background: red;
  }
}

3, :slotted ()

:slotted(): サブコンポーネント

でスタイル スロット コンテンツ スタイルを定義します。デフォルトでは、スコープ スタイルは

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

<template>
  <div>
    <slot>插槽</slot>
  </div>
</template>

<style lang="less" scoped>
:slotted(.red) {
  color: red;
}
</style>

4. :global()

:global(): スコープ外のスタイルを開かずにグローバル スタイルを定義するグローバル セレクター。

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

5. 動的 CSS (v-bind)

vue3 単一ファイル コンポーネントの