vuetify에서 텍스트 필드를 만들고 싶습니다

Question

https://i.stack.imgur.com/zbCfI.png

vuetify에서 텍스트 필드를 만들고 싶은데 버튼을 이렇게 만들 수는 없나요? 그리고 높이는 변경할 수 없나요? 높이를 여러번 바꿔봤는데 안되네요

이미 CSS가 있지만 vuetify에서는 사용하기 어렵습니다

.parent-box{
  width:fit-content;
  background:#26376B;
}
.text-box{
  border:1px solid #CACACA;
  padding:5px 10px;
  min-width:300px;
}
.btn{
  padding:5px 20px;
  width:100px;
  color:#fff;
  border:none;
  background-color:#26376B;
  cursor:pointer;
}
.common{
  outline:none;
  border-radius:50px;
}

<div class="parent-box common">
  <input class="text-box common" type="text" placeholder="Chassis Number">
  <button class="btn common">Check</button>
</div>

Answer 1

다음과 같이 비슷한 작업을 수행할 수 있습니다.

으아악

이 CodePen을 확인해 보세요

vuetify에서는 props를 통해 다양한 스타일을 사용자 정의할 수 있습니다. 그러나 기본적으로 vuetify는 Material Design에서 영감을 얻었으며 귀하의 예와는 달리 기본 스타일을 사용자 정의하는 것은 그리 쉽지 않습니다. 귀하의 경우에는 이 라이브러리를 사용하기 전에 일부 vuetify 테마를 적용하는 것이 더 나을 수 있습니다.

Answer 2

문제 설명: Vuetify에서 버튼이 있는 텍스트 필드를 만들고 싶습니다.

해결책:

HTML:

으아아아

Vue.js:

으아아아

출력: