Feature: Support Custom Styles for Parent Container

[WuChenDi]

During usage, we encountered layout issues related to the parent <div> container, which currently has hardcoded inline styles:

<div data-testid="container" style="box-sizing: border-box; position: relative; width: 100%; height: 200.948px; overflow: hidden; display: block;">
  ...
</div>

In real-world scenarios, this setup leads to the following problems:

• The container doesn't always need to take 100% width or a fixed height.
• Content may be clipped or not fully visible due to the restrictive overflow setting.
• Developers need more flexibility to control the container's layout dynamically.

As shown in the image below, some content is not displayed properly:

---

❓Problem

The current implementation does not allow users to customize the container style, making it difficult to adapt the layout to different contexts without resorting to CSS overrides or workarounds.

---

✅ Solution

Introduce a new optional containerStyle prop that allows users to pass custom styles directly to the outer <div> container.

Example usage:

<ReactCompareImage containerStyle={{ height: '300px', overflow: 'visible' }} />

And inside the component:

<div
  data-testid="container"
  style={{
    ...props.containerStyle, // override defaults with custom styles
    boxSizing: 'border-box',
    position: 'relative',
    width: '100%',
    height: '200.948px',
    overflow: 'hidden',
    display: 'block',
  }}
>