Jeecg Boot Vue3项目下怎么修改表单里字体样式

Jeecg Boot Vue3项目下怎么修改表单里字体样式

实现状态栏不同时，显示的字体颜色也不同

  {
    title: '状态',
    align: 'center',
    dataIndex: 'state_dictText',
    edit: true,
    //根据状态判断字体
    customRender: ({ text, record }) => {
      const rec: any = record;
      if (rec.state == 1) {
        return <span style="color:red">{text}span>;
      } else if (rec.state == 2) {
        return text;
      }
    },
  },

这种写法在Vue2项目里是没有问题的，但是到了Vue3项目下这块代码会报错。

 return <span style="color:red">{text}span>;

Jeecg Boot Vue3对比Vue2修改了很多，2里的~~LIst.Vue文件在3里拆分成了三个文件，多出了.data.ts和.api.js对于初学者真的非常的糟心，加上更加严格的规范校验，才生成的文件下全是红线看着头皮发麻。

我尝试过直接在单元格内直接创建一个元素进行测试，最后还是失败告终

customRender: ({ text, record }) => {
      let _this:any = this
      const h = _this.$createElement
      const child = h('div', {}, [
        h('span', {
          domProps: {
            innerHTML: '查看',
            color: 'red',
          },
          on: {
            click: function () {
              _this.chamBiographyClick(rec);
            },
          },
        }),
      ]);
      return {
        children: child,
        attrs: {},
      };
}

希望各位帮忙看看，万分感谢

望采纳！！！点击回答右侧采纳即可！！
你可以使用 CSS 样式来修改表单中字体样式。首先，你需要找到你项目中存放 CSS 样式的文件，通常是在 src/assets/css 或 src/styles 文件夹中。在这里你可以新建一个 CSS 文件来存放你的样式代码或者修改已有文件。

然后，找到你要修改的表单元素，在你的 CSS 文件中为它定义样式。例如，如果你想要修改表单中所有 标签的字体样式，可以这样写：

input {
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #333;
}