如何给from 表单的label 设置字体样式

[haobarry]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

我直接写style 都没有效果呢?

What does the proposed API look like?

可否增加一个 labelstyle 属性用来设置样式

labelstyle:{
font-size:20px;
color:red
}

[kovsu]

我怎么知道你怎么写 style 没效果呢？🥲

[selicens]

<template #label>
  <span :style="{fontSize: '20px', color: 'red'}">文字</span>
</template>

[haobarry]

<template #label>
  <span :style="{fontSize: '20px', color: 'red'}">文字</span>
</template>

谢谢 只能这样了, 不过就是表单项多的话就比较麻烦

[haobarry]

我怎么知道你怎么写 style 没效果呢？🥲
看看有啥好办法
https://codesandbox.io/s/ji-ben-shi-yong-ant-design-vue-4-0-6-forked-dzw5w2?file=/src/demo.vue

[kovsu]

我本地写 css 没发现有什么问题啊。

.test.ant-form-item .ant-form-item-label > label {
  color: red;
}

你看控制台这里样式出现了，网页上也生效了

[aibayanyu20]

<template>
  <a-form class="custom-form" :model="formState">
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>
  </a-form>
</template>
<script setup>
import { reactive } from "vue";

const formState = {
  username: "",
  password: "",
  remember: true,
};
const onFinish = (values) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>

<style>
.custom-form .ant-form-item .ant-form-item-label > label {
  color: red;
}
</style>

可以这样实现，添加属性目前没有计划

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.