[Bug] Form component background colour transparent

[kamprasad]

💬 Before You Start

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

🙋 Description/Step to reproduce

The Form component is adding default background colour white and no way to set it transparent.

Could you check and make adjustment to remove default colour assign to Form component.

🔴 Version

5.2.0-rc.1

💻 Environment

iOS

⚫️ Output of npx react-native info

NA

Additional comments

No response

[1uokun]

Form defaults to <List> component rendering, in order to use the existing structure of List, So plan a :

<Form
  styles={{
    Body: {
      backgroundColor: 'transparent',
    },
  }}
>

plan b: set rendering element by component prop

<Form component={View}>

[kamprasad]

Ok Thank you. This solution works perfectly.

[kamprasad]

@1uokun Is there a way to remove the margin around ? If I use which perfectly matches, but the error validation message no longer displayed in this case.

[1uokun]

<Form.Item> is also based on the structure of <List.Item>, so

please continue to try using styles in <Form.Item>

eg:

<Form.Item
  styles={{
    Item: { paddingLeft: 0 },
    Line: { paddingRight: 0, paddingVertical: 0 },
  }}>

</Form.Item>

Try More Semantic DOM style

interface FormItemStyle extends ListItemStyle {
  formitemRow: ViewStyle
  formitemColumn: ViewStyle
  formItemExtra: ViewStyle | TextStyle  // default: { maxWidth: 50% } as ListItem['extra']
  formItemLabel: ViewStyle              // default: { minWidth: 65 }
  formItemLabelText: ViewStyle | TextStyle
  formItemControl: ViewStyle            // children style
  asterisk: TextStyle                   // required={true}
  optional: TextStyle                   // requiredMark="optional"
}

interface ListItemStyle {
  underlayColor: ViewStyle
  Item: ViewStyle
  Line: ViewStyle
  Thumb: ImageStyle
  Content: TextStyle
  Extra: TextStyle
  Arrow: TextStyle
  ArrowV: TextStyle
  multipleLine: ViewStyle
  multipleThumb: ImageStyle
  column: ViewStyle
}

Tips: antd is a design & out-of-the-box, it is in natural conflict with customization There will be a headless UI solution in the future, which may be suitable for you

[kamprasad]

Thank you