Vuetify 버튼의 텍스트 색상을 변경하는 방법

Vuetify 버튼의 텍스트 색상을 변경하는 방법

뭔가 분명한 것을 놓치고 있는 건지도 모르지만, 텍스트 색상을 바꾸는 적절한 방법을 알 수가 없다.v-btn. 이것은 효과가 있지만, 사용해야만 한다.!important이상적으로 보이지 않음:

.v-btn
  color: red !important

그color소품은 내가 아는 한 배경색에 불과하다.그리고 전화할 때 1차/2차 테마를 바꿀 수 있을 것 같다.Vue.use(Vuetify, { theme: {...}} )하지만 단일 구성 요소를 재정의하려면 어떻게 해야 하는가?

텍스트 색칠을 위한 css 수업은 어디서나 가능하며, 추가만 하면 된다.--text색채에
예를 들어

<v-btn class="red--text">

테마에 정의된 색상으로도 작동해야 한다(예: primary--text그리고 유사하다.
이는 특정 항목에 국한되지 않는다는 점에 유의하십시오.v-btn수업은 어디서든 통해야 한다.

사용 중인 경우vuetify이 색상을 표준 색상으로 적용하는 것 같다.

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
    
Vue.use(Vuetify);
    
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#14C6FF",
        secondary: "#424242",
        accent: "#82B1FF",
        error: "#FF5252",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#FFC107",
        lightblue: "#14c6FF",
        yellow: "#FFCF00",
        pink: "#FF1976",
        orange: "#FF8657",
        magenta: "#C33AFC",
        darkblue: "#1E2D56",
        gray: "#909090",
        neutralgray: "#9BA6C1",
        green: "#2ED47A",
        red: "#FF5c4E",
        darkblueshade: "#308DC2",
        lightgray: "#BDBDBD",
        lightpink: "#FFCFE3",
        white: "#FFFFFF"
      }
    }
  }
});

그리고 쉽게 접근할 수 있다color="lightpink"소품이든 뭐든지요

버튼에 존재하는 스팬에 입력된 텍스트의 색상을 변경할 수 있다.이러한 방식으로:

v-btn {
border-radius: 8px !important;
border-color: red !important;
color: red  !important;
background-color: red !important;
text-decoration: none !important;
max-width: auto;
font-size-adjust: auto;
margin: 1px;
&:hover {
    background-color: blue !important;
    color: blue !important;
    text-decoration-color: blue !important;
    border-color: blue !important;
    margin: 1px;
    span {
        color: white !important;
    }
}

}

참조URL: https://stackoverflow.com/questions/52258669/how-to-change-the-text-color-of-a-vuetify-button