如何用CSS为Vue3 FormKit提交按钮自定义样式？

方法1：利用自定义类提高CSS优先级 #

你已经给提交按钮添加了submit-btn类，若未生效大概率是Genesis主题样式优先级更高，可通过精准选择器提升优先级解决：

/* 默认状态 */
.formkit-outer .submit-btn {
  background-color: #28a745; /* 替换为你需要的颜色 */
  border-color: #28a745;
}

/* 鼠标悬浮状态 */
.formkit-outer .submit-btn:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

/* 聚焦状态（可选） */
.formkit-outer .submit-btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25); /* 对应颜色的rgba值 */
}

若仍不生效，可临时用!important强制覆盖（优先优化选择器，不推荐长期依赖）：

.submit-btn {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

方法2：覆盖Genesis主题的CSS变量 #

Genesis主题基于CSS变量构建，直接覆盖变量是更优雅的方式：

全局修改所有FormKit按钮

在全局CSS文件中添加：

:root {
  --fk-color-primary: #28a745; /* 主色 */
  --fk-color-primary-hover: #218838; /* 悬浮色 */
}

仅修改提交按钮

如果只想单独调整提交按钮样式，用目标选择器局部覆盖变量：

.formkit-type-submit {
  --fk-color-primary: #28a745;
  --fk-color-primary-hover: #218838;
}

方法3：使用FormKit官方推荐的classes属性绑定类 #

替换代码中submit-attrs的写法，改用FormKit原生classes属性绑定类，确保类正确应用到按钮元素：

<FormKit
  type="submit"
  label="Submit"
  :classes="{
    input: 'submit-btn'
  }"
/>

之后配合方法1的CSS样式即可生效。

内容的提问来源于stack exchange，提问作者Shehab