要素のUIの入力だけでなく、ソリューション（ログインページ）についてのボタンのスタイルをカバーすることができません

何の手書きのHTMLとスタイルが存在しないためelementuiスタイルを使用して、ログイン画面の時間をやって、私は画面に適応ページを要求し、彼らはすべての要素の幅と高さの割合として書かれるべきであるので、

今回は、の要素のスタイル要素のUIを変更する必要があります

ユーザー名の入力ボックスには、最初に考えたの例であり、入力パターンを書き換えるページ内のクラス要素を見つけ、その後、スタイルに書き換えることで、

次のとおりです。

    .loginファイル-form__item { 
        マージン底：20ピクセル。
        
        .EL-input__inner { 
            高さ：！60PX重要。
            背景色：！赤い重要。
        } 
    }

しかし、その後に書かれた、問題は、私は効果が追加になりませんどのように重要とされ

理由：

　　私は、スタイルページにスコープ書いたので、VUE-負荷公式サイトはスタイルで書かれたスコープの親コンポーネントを使用した後に述べている行くのサブコンポーネントに浸透しません

公式ウェブサイトのアドレスを参照します：

　　https://vue-loader.vuejs.org/zh/guide/scoped-css.html 

スクリーンショット：

 

 ソリューション：

最初：あなたは、ローカルおよびグローバルスタイルのスタイルのミックスを混在させることができます

あなたは一つの成分でスコープと非スコープいる両方のスタイルを使用することができます。

<スタイル>
 / * グローバルスタイル* / 
</スタイル> 

<スタイルは、スコープ> 
/ * ローカルのスタイル* / 
</スタイル>

この問題は解決しますが、簡単に混乱し、当然の文体の入力は、グローバルに不適切であることができます

第二：セレクタの役割の深さ

あなたがしたい場合はscoped、セレクタのスタイルがサブアセンブリの例の影響のために、「より深い」取得機能することができ、あなたが使用できる>>>演算子を：

<スタイルスコープ> 
.A >>> .B { / * ... * / } 
</スタイル>

コンパイルした後、

.A [データ-V-f3f3eg9] .B { / * ... * / }

しかし、問題があります

いくつかはサスのようなプリプロセッサとして正しく解決することはできません>>>。この場合、あなたは使用することができます/deep/または::v-deepその代わりオペレータ-の両方の>>>別名も動作することができます。

    .loginファイル-form__item { 
        マージン底：20ピクセル。
        
        /ディープ/ .EL-input__inner { 
            高さ：60PX。
            背景色：赤。
        } 
    }

この問題を解決するためのパーフェクト