Vuetify 2를 3으로 마이그레이션: 제거된 스타일 .v-application/rounded/Flat 교체
<p>Vuetify/Vue 2에서 3으로 업그레이드하려고 합니다. 저는 프런트엔드 개발자가 아니며, 기능을 유지하기 위해 일부 오래된 코드를 업그레이드하는 일을 담당하고 있습니다. 안타깝게도 마이그레이션 가이드에서는 일부 기본적인 CSS 지식을 가정하고 제거된 모든 항목을 수정하는 방법에 대한 예를 제공하지 않습니다. </p>
<p>다음 코드 조각에서 <code>rounded</code> 및 <code>플랫</code>을 마이그레이션하는 방법을 알아내려고 합니다. </p>
<pre class="brush:php;toolbar:false;"><v-select
class="mr-2 필터-사용자 정의-입력"
Slot="prepend-inner";
v-model="필드"
:items="필드"
menu-props="자동"
label="필드"
세부정보 숨기기
하나의 선
밀도="콤팩트"
둥근
평평한
테마="어두운"
//></pre>
<p>및 <code>.v-application</code>(필요한 경우): </p>
<pre class="brush:php;toolbar:false;"><style lang="scss"
.v-application--is-ltr .v-list-item__icon:첫 번째 하위,
.v-application--is-ltr .mr {
오른쪽 여백: 10px;
}
<p>안타깝게도 이전 가이드에서 이에 대한 유일한 제안은 다음과 같습니다. </p>
<li><code>rounded</code> 속성이 제거되었습니다. 메뉴 콘텐츠 요소에 둥근 모서리 CSS 클래스를 적용하세요. 예: <code>.rounded-te</code></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>
