Vuetify 2 から 3 への移行: 削除されたスタイルを置き換えます .v-application/rounded/ flat
<p>Vuetify/Vue 2 から 3 にアップグレードしようとしています。私はフロントエンド開発者ではなく、機能を維持するために古いコードをアップグレードする責任があるだけです。残念ながら、移行ガイドは基本的な CSS 知識を前提としているようで、削除されたものをすべて修正する方法の例は提供されていません。 </p>
<p>次のコード スニペットで <code>rounded</code> と <code> flat</code> を移行する方法を見つけようとしています。 </p>
<pre class="brush:php;toolbar:false;"><v-select
クラス= "mr-2 フィルター-カスタム入力"
スロット = "先頭に追加"
v-model="フィールド"
:items="フィールド"
menu-props="自動"
ラベル=「フィールド」
詳細を隠す
単線
密度=「コンパクト」
丸い
フラット
テーマ=「ダーク」
/>
<p> と <code>.v-application</code> (必要な場合) このコード スニペット: </p>
<pre class="brush:php;toolbar:false;"><style lang="scss" スコープ>
.v-application--is-ltr .v-list-item__icon:first-child、
.v-application--is-ltr .mr {
右マージン: 10px;
}
</style></pre>
<p>残念ながら、移行ガイドでのこれらに関する唯一の提案は次のとおりです: </p>
-
<li><code>rounded</code> 属性は削除されました。メニューコンテンツ要素にはCSSクラスの角丸を適用してください。例: <code>.rounded-te</code></li>
<li>以前に <code>.v-application p</code> または <code>.v-application ul</code> として含まれていたグローバル スタイルは含まれなくなりました。 <code>p</code> にマージンを追加する必要がある場合、または <code>ul</code> および <code>ol</code> に左パディングを追加する必要がある場合は、これをルート コンポーネントの手動設定に追加します。 <code><style></code> タグ内。 </li>
</ul>
<p><code>rounded</code> に関する上記のガイダンスは、<code>rounded</code> を <code> に置き換えるだけです。rounded-te</code> は機能しません (言うまでもなく、別のタイプのコントロールで言及されています）。 </p>
<p>フラットが他のいくつかのコントロールから削除され、「単一バリアント属性」に置き換えられたと書かれていますが、<code>フラット<を<code>variant="フラット"</code>に置き換えようとしています。 /code> では構文エラーが発生します。</p>
<p>ありがとうございます! </p>
<p>(最初にこの質問をここでしましたが、誰かが複数の質問に分割するよう提案しました)</p>
