Question

假设我已在

之类的Vue组件中添加了Vuetify的

class PageOne(tk.Frame):

    def get_procurement_file(file_entry):
        file_name = fd.askopenfilename(title="Select file", filetypes=(("CSV Files", "*.csv"),))
        entry_file = file_name.split("/")[-1]
        if entry_file == "government-procurement-via-gebiz.csv":
            file_entry.popup_successinfo()
            file_entry.delete(0, tk.END)
            file_entry.insert(0, entry_file)
        else:
            file_entry.popup_errorinfo()
            file_entry.delete(0, tk.END)
        # file_entry.delete(0,END)
        # file_entry.insert(0,file_name)

    def get_contractor_file(file_entry):
        file_name = fd.askopenfilename(title="Select file", filetypes=(("CSV Files", "*.csv"),))
        entry_file = file_name.split("/")[-1]
        if entry_file == "listing-of-registered-contractors.csv":
            file_entry.popup_successinfo()
            file_entry.delete(0, tk.END)
            file_entry.insert(0, entry_file)
        else:
            file_entry.popup_errorinfo()
            file_entry.delete(0, tk.END)
        # file_entry.delete(0,END)
        # file_entry.insert(0,file_name)

    def popup_successinfo(self):
        showinfo("Window", "Successfully input!")

    def popup_errorinfo(self):
        showinfo("Window", "Wrong input! Please insert the Correct File!")

    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        self.controller = controller

        self.entry_csv = tk.Entry(self, text="", width=80, font=20)
        self.entry_csv.place(x=250, y=380)
        self.entry_csv2 = tk.Entry(self, text="", width=80, font=20)
        self.entry_csv2.place(x=250, y=500)

        self.label = tk.Label(self, bg="#64dd17", height=10, font=30, text="1002 Dataset Analyzer")
        self.label.pack(fill="x")

        self.label = tk.Label(self, text="1st Dataset File: ", font=30)
        self.label.place(x=100, y=380)

        self.button = tk.Button(self, text="Browse...", width=10, height=2, command=lambda: self.get_procurement_file())
        self.button.place(x=1000, y=370)

        self.label = tk.Label(self, text="2nd Dataset File:", font=30)
        self.label.place(x=100, y=500)

        self.button = tk.Button(self, text="Browse...", width=10, height=2, command=lambda: self.get_contractor_file())
        self.button.place(x=1000, y=490)

        self.button = tk.Button(self, text="Upload", command=lambda: controller.show_frame("PageTwo"), width=10, height=2)
        self.button.place(x=1250, y=430)

组件

v-text-field

当我检查该元素时，它会生成普通的HTML，例如

<v-text-field v-model="email"name="email" type="email" color="#90C143" label="Email">

我要处理的内容，如果我想为该<div class="v-input v-input--has-state theme--light v-text-field v-text-field--is-booted" style=""> <div class="v-input__control"> <div class="v-input__slot"> <div class="v-text-field__slot"> <label for="input-39" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Email </label> <input name="email" id="input-39" type="email"> </div> <div class="v-input__append-inner"> <div class="v-input__icon v-input__icon--"> <i role="button" class="v-icon notranslate v-icon--link material-icons theme--light" style=""> </i> </div> </div> </div> </div> </div>自定义整个CSS而不影响功能

Answer 1

在组件内部添加一个CSS类，

<style scoped>
.text-field{
color: #90C143 !important; // this will override the existing property applied
// added whatever properties you want
}
</style>

然后在组件中将其添加到类中，而不是颜色属性中

<v-text-field v-model="email"name="email" type="email" class="text-field" label="Email">

您只能使用vuetify documentation

中提供的预定义类

如果要在color属性上使用自定义颜色，则可以设置 main.js中的Vuetify对象中拥有自己的主题

Vue.use(Vuetify)

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#90C143',
        secondary: '#b0bec5',
        anchor: '#8c9eff',
      },
    },
  },
})

您可以像这样使用的所有文本字段

<v-text-field v-model="email"name="email" type="email" color="primary" label="Email">

还是要更改全局使用的文本字段的默认颜色 app.vue中的这些CSS

//不要使用作用域

<style>
.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
    border-color: #90C143;
}

.theme--light.v-label {
    color: #90C143;
}

.theme--light.v-input:not(.v-input--is-disabled) input, .theme--light.v-input:not(.v-input--is-disabled) textarea {
    color: #90C143;
}
</style>

如何在Vuetify组件上应用自定义/替代CSS？

1 个答案: