🧐[问题]如何修改ProForm某子项的样式？现在用className已经无效

leila-huang commented 1 year ago

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

需要修改ProForm中某个子项的样式

💻 示例代码

      <ProFormRadio.Group
        required
        name="GoodsType"
        layout="horizontal"
        options={[]}
        className={styles.goodsLayout}
      />

.goodsLayout{
  :global{
    .ant-form-item{
      margin-bottom: 0;
    }
    .ant-checkbox-wrapper{
      min-height: 32px;
    }
  }
}

🚑 其他信息

"@ant-design/pro-components": "2.3.57"

chenshuai2144 commented 1 year ago

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

可以通过 ProForm 的 getFieldDecorator 方法创建一个自定义的字段，然后在里面通过 className 添加自定义样式。

示例代码：

import { ProFormRadio } from '@ant-design/pro-form';
import { Form } from 'antd';
import React from 'react';
import styles from './index.less';

const { Item } = Form;

const CustomRadio = ({ fieldProps, className, ...restProps }) => {
  return (
    <Item className={className}>
      <ProFormRadio.Group
        {...fieldProps}
        options={[]}
        layout="horizontal"
        {...restProps}
      />
    </Item>
  );
};

export default function Example() {
  return (
    <div className={styles.container}>
      <Form>
        <CustomRadio
          fieldProps={{
            name: 'GoodsType',
            rules: [{ required: true, message: '请选择商品类型' }],
          }}
          className={styles.goodsLayout}
        />
      </Form>
    </div>
  );
}

在上面的代码中，我们创建了一个名为 CustomRadio 的自定义组件，并在其中使用了 ProForm 的 getFieldDecorator 方法来创建一个自定义的字段。在 ProFormRadio 内部添加了 {...fieldProps} 和 {...restProps} 以支持 ProFormRadio 的所有属性。然后在 CustomRadio 的 Item 中添加了 className，这里就可以使用样式对 ProFormRadio 进进行自定义样式的修改。

需要注意的是，我们在外层的 Form 上没有设置 layout 属性，因此 ProFormRadio 的 layout 属性需要在 CustomRadio 中指定。

此外，需要确保传入 getFieldDecorator 的 name 字段与其对应的组件 name 属性一致。

关于 getFieldDecorator 和自定义组件的更多细节可以查看 antd 官方文档：

coder-belong commented 3 weeks ago

现在还没解决吗

ant-design / pro-components