vue 구성 요소에서 스타일을 사용하는 가장 좋은 방법은?
프로젝트를 만들기 위해 vue cli를 사용하지만 스타일에 '오류'가 있다.
나는 단지 3열 20vh 50vh 30vh의 구성 요소를 테스트한다.
<template>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</template>
<style scoped>
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
</style>
그리고 내 앱도.부에를 하다
*{padding: 0; margin: 0; box-sizing: border-box;}
이런 스타일(필요한 스타일)을 얻었다.
하지만 페이지를 새로 고치면 스타일을 구울 수 있는 화이트 스페이스가 생기고, 다시 불러오면 좋아보이고, 새로 고치면 같은 화이트 스페이스가 생긴다면 왜 그럴까?
이 속성을 주입한 개발자 도구에서 확인했을 때, 물론 내가 삽입한 것이 아닌 여백에 대한 이 행동을 확인했을 때, 나는 이것이 그것을 vue로 만든 행동이라고 생각한다, 어쩌면 범위 속성으로 만든 행동인가?그런데 왜? 왜?어떻게 고칠까?
시체가 어디 있는지 모르듯이.margin-bottom적용하고 있다. 아래 예에서와 같이 내가 의도적으로 추가했다.margin-bottom몸매를 가꾸고 스타일도 적용했다.
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
body{
margin-bottom:50px;
}
*{padding: 0px; margin: 0px; box-sizing: border-box;}<body>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>이제 포함됨!important내 css 스타일을 강하게 적용해서 효과가 있었어
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
body{
margin-bottom:50px;
}
*{padding: 0px !important; margin: 0px !important; box-sizing: border-box;}<body>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>Vue에서 스타일 태그와 함께 범위 속성을 사용할 경우 CSS는 현재 구성 요소에만 적용된다.
*{}에서 마진을 선언했지만 스타일 태그와 함께 범위 속성을 사용하는 것과 동일한 이유로 마진이 작동하지 않는 경우.
https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
*{}의 마진 속성에 !중요를 사용할 수 있다.
다음 링크를 살펴보십시오. https://vuejsdevelopers.com/2017/05/01/vue-js-cant-help-head-body/
마진이 자동으로 주입되면 모든 브라우저에서 앱을 확인하십시오.일부 브라우저는 자동으로 마진 하단을 주입하기 때문이다.
해당 구성 요소에 {margin-bottom: 0!중요}을(를) 추가하면 방지할 수 있음
또는
#app {message: 100vh}
참조URL: https://stackoverflow.com/questions/62505232/whats-the-best-practice-to-use-styles-in-vue-components
'Programing' 카테고리의 다른 글
| Vue 글로벌 css 자체 덮어쓰기를 여러 번 방지하는 방법 (0) | 2022.05.18 |
|---|---|
| Bool을 C++로 재정의하는 C 헤더를 흉내낼 수 있을까? (0) | 2022.05.18 |
| 다른 Vuex 모듈에 타입스크립트로 접근하는 방법? (0) | 2022.05.18 |
| 문자열을 구성 요소로 교체하는 방법(vue)하는 방법 (0) | 2022.05.18 |
| 배열 뷰에서 항목을 제거한다. (0) | 2022.05.18 |