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

推薦する

Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...

MySQL ストアド プロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

JavaScriptは検証コードと検証のランダム生成を実装します

この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...

JavaScript の isPrototypeOf 関数

目次1. isPrototypeOf()例 1、オブジェクト クラス インスタンス:例 2: Hum...

Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。

実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...

bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...

CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...

Viteプロジェクトを作成する手順

目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...

初心者向けに Docker に Jenkins をインストールする方法を詳しく説明したチュートリアル

Jenkins はオープンソース ソフトウェア プロジェクトです。Java をベースに開発された継続...

Vue ミックスインの使い方の詳しい説明

目次Vue ミックスインの使用ミックスインでのデータアクセスミックスイン/index.jsホーム.v...

Docker で Tomcat を使用して Web アプリケーションを迅速にデプロイする方法の例

Docker の基本的な操作を学習した後、コンテナにいくつかの基本的なアプリケーションをデプロイして...

写真とテキストによる MySQL 8.0.11 インストール チュートリアル

インターネット上には多くのチュートリアルがありますが、基本的には同じです。ただし、細かい原因でソフト...

CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

div で background-color と background-image を同時に設定する...

反応ループデータの実装(リスト)

まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...

Mysql Explainコマンドの使用と分析

mysql explain コマンドは、MySQL がインデックスを使用して選択ステートメントを処理...