ElementUIカスタムCSSスタイルが有効にならない問題を解決する

例えば、入力ボックスがあります

<el-入力
        ref="mySearch"
        クラス="mySearch"
        サイズ="小"
        placeholder="コンテンツを入力してください"
        サフィックスアイコン="el-icon-search"
        v-model="input1">
</el-input>

カスタムスタイルが追加されていない場合、入力ボックスは次のようになります。

ここに画像の説明を挿入

そうだといい

ここに画像の説明を挿入

Google Chromeの開発者ツールから、対応するstyle.el .el-input__innerのクラス名を見つけます。
しかし、 htmlの前のel-inputタグがこのように解析され、 mySearch自分で追加されたので、 mySearchの要素を見つけることができ、変更する必要があるサブ要素のクラス名は.el-input__innerであることがわかりました。

ここに画像の説明を挿入

CSS セレクターで子要素を選択した場合、子要素内の要素には適用できません。以下は stylus 構文を使用しています。以下は誤った書き方です。

<style scoped lang="stylus" rel="stylessheet/stylus">
    .mySearch .el-input__inner
        境界線半径 20px
</スタイル>

それを機能させる方法

解決策1：真ん中に/deep/を追加する必要があります

<style scoped lang="stylus" rel="stylessheet/stylus">
    .mySearch /deep/ .el-input__inner
        境界線半径 20px
</スタイル>

解決策 2: scopedを削除します。この方法では目的の効果が得られますが、推奨されません。

一般的に、これが機能しない理由は、このscopeが原因でスコープが内部のサブコンポーネントで機能しないためです。この問題の最終的な解決策は、サブコンポーネントで機能するように/deep/を追加することです。

ElementUI カスタム CSS スタイルが有効にならない問題の解決策に関するこの記事はこれで終わりです。ElementUI スタイルが有効にならないことに関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: Docker で lnmp をデプロイする詳細な手順

>>: MySQL関数の包括的な概要