CSS 범위 구성 요소에는 스타일이 적용되지 않습니다.

debugcn 에 게시 Dev

누르 누리

다음과 같은 간단한 구성 요소가 있습니다.

<template>
    <div>
        <b-form-group label="From:" label-align="left" label-for="nested-from">
            <date-pick :displayFormat="'DD/MM/YYYY'" v-model.trim="search_form.date_from"></date-pick>
          </b-form-group>
        </b-col>
    </div>
</template>

<script>
export default {
    name: 'simpleComp'
}
</script>

<style scoped lang="scss">
@import "~vue-date-pick/src/vueDatePick.scss";

.vdpComponent.vdpWithInput > input {
  @extend .form-control !optional;
  display: block;
  border: 5px solid blue !important;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
</style>

다음은 콘솔의 스크린 샷입니다.

이것은 큰 프로젝트의 샘플 일뿐입니다. 기본적으로 구성 요소에 입력이 있고 스타일이 적용되지 않지만 제거 scoped하면 모든 것이 정상으로 돌아 오지만 범위가 지정된 수준으로 유지하고 싶습니다.

나는 조금 검색하고 SO 에서이 대답을 찾았습니다.

어떤 이유로 범위가 지정된 스타일은 구성 요소에 처음 추가 될 때 핫 리로드 중에 적용되지 않습니다. 전체 페이지 다시로드는 스타일이 감지되었으므로 연속 핫 다시로드로 업데이트되는 문제를 해결합니다.

이 대답은 설득력이 없습니다. 어떤 이유로? 어떻게 피하고 문제를 해결합니까? 홈 페이지가로드 될 때 전체 핫 리로드를 어떻게 수행합니까?

페이지를 새로 고침 해 보셨나요? 개발 서버를 다시 실행했지만 여전히 작동하지 않습니까? 누구든지 도울 수 있습니까? 미리 감사드립니다.

kissu

이전 의견에서 말했듯이 SCSS여기에서 사용 하고 타사 구성 요소를 대상으로하기 때문에 이렇게 작성해야합니다.

::v-deep .vdpWithInput input {
  // your fancy style here
}

이 특정 구성 요소에서 범위를 지정하고 앱 전체에서 번지지 않도록하는 데 도움이됩니다.

딥 셀렉터를위한 유용한 링크 : https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

CSS 범위 구성 요소에는 스타일이 적용되지 않습니다.

CSS 범위 구성 요소에는 스타일이 적용되지 않습니다.

반응 하위 구성 요소 목록의 첫 번째 구성 요소에 CSS 모듈 스타일이 적용되지 않는 이유는 무엇입니까?

하위 요소에 적용되지 않는 로컬 요소 범위 스타일

Vaadin 요소가있는 Angular 2 구성 요소에 CSS 스타일이 적용되지 않는 이유는 무엇입니까?

Vue 구성 요소에 적용되지 않는 scss 스타일

CSS 스타일이 헤더에 적용되지 않습니다.

CSS는 jQuery 모바일에서 동적으로 생성 된 요소에 적용되지 않습니다.

AngularJS 1.5 구성 요소 스타일이 적용되지 않음

내 CSS 스타일이 html 요소에 적용되지 않는 이유

스타일 구성 요소로 인해 입력 범위가 작동하지 않습니다.

보간을 사용한 스타일 구성 요소 조건부 렌더링이 적용되지 않습니다.

내 Scss 스타일이 내 구성 요소에 표시되지 않습니다.

애니메이션이 스타일 구성 요소에 동적으로 할당되지 않습니다.

스타일이 지정된 구성 요소에 전달되었지만 소품이 적용되지 않습니다.

스타일이 지정된 구성 요소, 애니메이션이 적용되지 않는 SVG

상위 구성 요소에서 하위 구성 요소 스타일을 변경하지만 전역 적으로 변경하지 않습니다.

스타일이 지정된 구성 요소 및 useState 후크에서 소품을 사용하여 CSS를 변경하는 방법을 알 수 없습니다.

스타일을 구성 요소에 적용하지 않는 React 스타일 구성 요소

CSS 계산 속성 패널에서 최상위 스타일이 덜 구체적인 스타일을 덮어 쓰지 않는 것 같습니다. 어떻게 그럴 수 있습니까?

기능적 구성 요소 소품을 업데이트해도 스타일이 변경되지 않습니다.

Powershell new-aduser 속성이 허용되는 범위에 있지 않습니다.

목록 스타일 항목 CSS는 UL에 적용되지 않습니다.

재료 Ui 용지 구성 요소가 상위 구성 요소 높이에 맞지 않습니다.

스타일이 지정된 구성 요소에 배경 이미지가 표시되지 않습니다.

CSS 스타일이 적용되지 않습니다

Uib-alert CSS 스타일이 적용되지 않습니다.

Angular : CSS 캡슐화 버그-그리드 구성 요소 : 호버 스타일이 형제 그리드 구성 요소에 적용됩니다.

angular2 하위 구성 요소는 상위 구성 요소에서 발생한 후속 이벤트에서로드되지 않습니다.

css 스타일이 react.js에서 동일한 클래스 이름을 사용할 때 구성 요소에서 누출 (다른 구성 요소에 의해 상 속됨)되는 이유는 무엇입니까?

CSS Flex 상자로 스타일이 지정된 요소는 상위 요소 외부에 나타나며 상위 요소와 수직으로 정렬되지 않습니다.