[vuetifyjs] v-text-field 높이값 조절

내가 사용한 프레임 워크 

vuetify v-text-field

https://vuetifyjs.com/en/components/text-fields/

Vuetify — A Vue Component Framework

 

이번에 처음으로 vuetify를 써보면서 

프레임워크에서 선언된 컴포넌트들의 스타일을 바꾸는데 

애를 많이 먹었다.

 

많이 바꾸는 것도 아니고 높이 조절이나 폭 조절, 색상 변경 등과 같이 

기본적인 부분을 바꾸는 것도 하나하나 확인 하면서 고치기가 여간 힘들어 

정리해 보고자 한다. 

 

높이값을 조절하기 위해서는 global css에 아래의 css 를 적용하면 된다. 

    .v-text-field {
        height: 33px; // 원하는 높이값

        .v-input__control {
            height: inherit;

            .v-input__slot {
                height: inherit;
                min-height: initial; 고정된 높이는 이것 때문에 안먹음
            }
        }
    }

 

배경 색은 v-text-field에 바로 적용하면 되고

input-box 안에 아이콘을 넣을 때 

아이콘의 margin 값을 조절해야 된다. 

        .v-text-field {
            background-color: #F3F6F9;
            font-size: 14px;

            .v-input__append-inner {
                margin-top: 5px; // 내가 설정한 높이에 따른 마진
            }
        }

 끝.