一部のスタイルは、スタイルが vue でスコープ指定されるように設定された後は有効になりません。

elementUI のコンポーネントライブラリを使用しているため、el-dialog を使用しているページでスタイルを変更する必要がありますが、<style> でスコープを設定してもスタイルが反映されません。

Vue のスコープ付きラベルは、このコンポーネントのすべてのラベルに一意の属性を付けるため、スタイルが有効になると、この一意の属性も適用されます。ただし、ルート ラベルを除き、このコンポーネントによって適用されるすべてのサブコンポーネントには、この一意の属性がラベル付けされません。したがって、スタイルは当然有効になりません。

vue は一意の属性を自動的に追加します

独自の属性が追加されます。これは、スタイルの分離を達成するためにスコープ指定された vue の原則です。

他のページに影響を与えることを恐れない場合は、scoped を削除するとスタイルが有効になります。

スコープを削除しない解決策:

公式ソリューションを確認しました

Vue が提供する公式のソリューションは次のとおりです: Depth アクション セレクター

<style scoped>
::v-deep .el-dialog {
  background-color: #0c1d3f;
}
</style>

/deep/、>>>、::v-deep も使用できます。

/deep/ は vue 3.0 でエラーを報告します。::v-deep を使用できます。