다시 작성된 제목은 다음과 같습니다. Vuetify의 ::v-deep .v-autocomplete__content.v-menu__content가 Vue의 스타일 범위에서 작동하지 않습니다.

Question

프로젝트 목록을 확장할 수 있는 v-autocomplete(vuetify)가 있습니다

항목 목록에서 사용 가능한 항목을 입력하기 위해 자동 완성을 클릭하면 아래 이미지에 표시된 것처럼 항목이 있는 컨테이너가 원하는 위치에 있지 않습니다. (다음 예를 사용했습니다.) 자체 메뉴를 vuetify합니다. 문제의 시스템 이미지에 내가 본 내용을 추가할 수 있습니다)

devTools의 .v-autocomplete__content.v-menu__content 클래스를 선택하면 필요에 따라 자동 완성 기능을 배치할 수 있습니다(예: margin-left 적용).

이 페이지에만 이 스타일을 추가하고 싶기 때문에 범위가 지정된 스타일 내에서 v-autocomplete__content 클래스를 전달하려고 하면 문제가 발생하기 시작합니다. 해당 페이지의 다른 스타일에서 이미 사용되었으므로 ::v-deep 및 심지어 >>>를 사용해 보았지만 작동하지 않습니다.

아래에는 이해를 돕기 위해 devTools를 사용하여 선택한 필드의 사진도 있습니다. 내 진짜 질문은 단지 범위 내에서 스타일을 사용하려고 하는 것입니다. 누구든지 내가 원하는 방식으로 편집할 수 있는 팁이나 다른 대안이 있습니까? Vuejs를 사용하고 있습니다.

어떤 도움이라도 환영합니다 :)

으아아아

>>> 모드와 함께 ::v-deep을 사용해 보았고 심지어 ::v-deep 없이 .v-autocomplete__content.v-menu__content 클래스를 전달해 보았습니다.

Answer 1

컴포넌트 내부가 아닌 컴포넌트의 DOM v-autocomplete__content div 的位置，您会发现它附加到您的根 v-app을 보면 알 수 있습니다. 이 기능을 변경하기 위해 Vuetify는 v-autocomplete를 지정하여 원하는 요소(예: 구성 요소 루트)에 연결할 수 있는 attach 속성을 제공합니다. 이렇게 하면 범위가 지정된 스타일이 v-autocomplete

에 도달할 수 있습니다. 으아악