如何使用CSS设置Formkit提交按钮的样式？

Question

我正在使用 formkit 和 vue3。我还为 formkit 导入了 genesis 主题。 但我想用 css 将提交按钮从默认的蓝色设置为另一种颜色。但不知道该怎么做。

这是代码：

<FormKit type="form" id="form-bootstrap" @submit="submitHandler" :actions="false" #default="{ value }">
          <FormKit
            type="text"
            name="email"
            label="Your email"
            placeholder="[email protected]"
            help="What email should we use?"
            validation="required|email"
            validation-visibility="submit"
          />
          <div class="col-2">
            <FormKit
              type="submit"
              label="Submit"
              :submit-attrs="{
                inputClass: 'submit-btn'
              }"
            />
          </div>
        </FormKit>

我尝试过不同的方法，但似乎不起作用。

Answer 1

您可以使用

:classes

样式覆盖来实现此目的。诚然，如何覆盖单个元素的样式是相当令人困惑的。您确实应该使用新的主题生成器：https://themes.formkit.com/

文档：https://formkit.com/essentials/styling#styling#classes-prop

演示：https://formkit.link/08f2e1f24ebe8ebc7da0b1a0b24a0858

示例代码：

<template>
  <FormKit type="form" id="form-bootstrap" @submit="submitHandler" :actions="false" #default="{ value }">
    <FormKit
      type="text"
      name="email"
      label="Your email"
      placeholder="[email protected]"
      help="What email should we use?"
      validation="required|email"
      validation-visibility="submit"
    />
    <div class="col-2">
      <FormKit
        type="submit"
        label="Submit"
        :classes="{
          outer: {
            'my-button': true
          },
          input: {
            $reset: true
          }
        }"
      />
    </div>
  </FormKit>

</template>

<style scoped>
.my-button {
  background-color: #c1c1c1;
  border-radius: 1rem;
  text-align: center;
  padding: 5px;
}
</style>