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

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関数の包括的な概要

推薦する

Dockerコンテナレイヤーの概念の詳細な説明

目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...

du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法

Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...

JavaScript でプライベート変数を宣言する 2 つの方法

序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...

HTMLのposition属性の使い方(4種類)の詳しい説明

位置の 4 つのプロパティ値は次のとおりです。 1.相対的な2.絶対3.修正4.静的これら 4 つの...

JavaScript parseInt() と Number() の違いのケーススタディ

学習目標: parseInt() と Number() という 2 つの関数は、文字列をデータ型に変...

mysqldump を使用した MySql のインポートおよびエクスポート方法の概要

データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する複数の方法

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する 7 つの方法。コー...

Windows Server 2016 AD サーバーをセットアップする手順 (画像とテキスト)

導入: AD は Active Directory の略称で、中国語では Active Direct...

Docker管理に関する断片的な知識のまとめ

目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...

サーバーから返される14の一般的なHTTPステータスコードの詳細な説明

HTTP ステータス コードステータス コードは 3 桁の数字と理由フレーズ (最も一般的なもの: ...

HTML特殊文字の徹底分析

HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...

React 星評価コンポーネントの実装

要件は、製品の評価データを渡すことであり、ページには対応する星の数が表示されます。 1. 異なる評価...

docker pruneコマンドは、あまり使用されないデータを定期的にクリーンアップするために使用できます。

目次docker システム df docker システム プルーンNoneオブジェクトをクリーンアッ...

Baidu 入力メソッドが API を公開、自由に移植して使用できると主張

百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...

モバイルレイアウト用の動的REMの実装

ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...