学習の過程で、Element-UI コンポーネント ライブラリを使用する際に、デフォルトのスタイルを変更したいことがあり、いくつかの方法を学んだので、ここで共有します。
まず第一に、コンポーネント ライブラリを使用した後、検査ツールでクラスを表示できることを知っておく必要があります。これはコンポーネント ライブラリによって追加されたものであり、自分で作成したものではありません。コンポーネント ライブラリによって追加されたクラスを使用できますスタイルを変更します。
たとえば、下の最初の図は私が追加したコンポーネント ライブラリで、2 番目の図の赤いボックスはコンポーネント ライブラリ自体によって追加されたラベルです。赤いボックス内のラベルのクラスを使用してスタイルを変更できます。
ほとんどの友人が vue を使用する場合、style タグにscoped 属性を追加する必要があります。この属性は、現在のコンポーネントのスタイルが他のコンポーネントに影響を与えないように、コンポーネントをプライベート化するためのものです。style タグにscoped 属性を追加すると、この場合、Element-UI のスタイルはグローバルで定義されているため、ここでスタイルを直接変更することはできません。スコープ付きを使用すると、ローカル スタイルがグローバル スタイルによって上書きされてしまいます。その場合、次の方法で解決できます。この問題：
1. 範囲指定されたものを削除します
この方法は完全に可能ですが、スコープを削除した後にグローバル スタイルを汚染する可能性があります。
2. Vue は複数のスタイルをサポートします
予想外に、別のスタイルを直接記述するだけで、スコープ内のスタイルには影響せず、Element-UI のデフォルトのスタイルが変更されます。
3. 深さセレクター
Vue はディープ セレクター (ディープ セレクター) を提供します。形式は '親タグのクラス' /deep/ '変更されるタグのクラス'で、これはスコープ付きスタイル タグでも役立ちます。他に ::v-deep と >>> という 2 つの記述方法があります。
効果: (幅、高さ、背景色を変更)
以上がElement-UIのデフォルトスタイルを変更する方法ですが、ディープセレクターはとても使いやすく、誰でも使えます！