diff --git a/docs/components/column.md b/docs/components/column.md
index 53fc4624..19915f3e 100644
--- a/docs/components/column.md
+++ b/docs/components/column.md
@@ -29,4 +29,25 @@ const Email = () => {
## Component Props
-This component has no custom props, but expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'td'>`.
+```tsx
+export interface ColumnProps extends BaseProps<'td'> {
+ bgColor?: string;
+ bgImage?: string;
+}
+```
+
+```tsx
+bgColor: string;
+```
+
+Used to set the background color in HTML email by wrapping the `bgcolor` property of `
` elements
+
+```tsx
+bgImage: string;
+```
+
+Used to set background images in HTML email by wrapping the `background` property of ` | ` elements
+
+:::tip
+This component expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'td'>`.
+:::
diff --git a/packages/jsx-email/src/components/column.tsx b/packages/jsx-email/src/components/column.tsx
index f04f4f21..d3b494c4 100644
--- a/packages/jsx-email/src/components/column.tsx
+++ b/packages/jsx-email/src/components/column.tsx
@@ -1,12 +1,28 @@
import { debug } from '../debug';
import type { BaseProps, JsxEmailComponent } from '../types';
-export interface ColumnProps extends BaseProps<'td'> {}
+export interface ColumnProps extends BaseProps<'td'> {
+ bgColor?: string;
+ bgImage?: string;
+}
const debugProps = debug.elements.enabled ? { dataType: 'jsx-email/column' } : {};
-export const Column: JsxEmailComponent = ({ children, style, ...props }) => (
-
+export const Column: JsxEmailComponent = ({
+ children,
+ bgColor,
+ bgImage,
+ style,
+ ...props
+}) => (
+
{children}
|
);
diff --git a/packages/jsx-email/test/.snapshots/column.test.tsx.snap b/packages/jsx-email/test/.snapshots/column.test.tsx.snap
index b3f381fe..17660d7e 100644
--- a/packages/jsx-email/test/.snapshots/column.test.tsx.snap
+++ b/packages/jsx-email/test/.snapshots/column.test.tsx.snap
@@ -5,3 +5,7 @@ exports[` component > passes style and other props correctly 1`] = `" component > renders children correctly 1`] = `" | Test message | "`;
exports[` component > renders correctly 1`] = `"Lorem ipsum | "`;
+
+exports[` component > renders correctly with background color 1`] = `"Lorem ipsum | "`;
+
+exports[` component > renders correctly with background image 1`] = `"Lorem ipsum | "`;
diff --git a/packages/jsx-email/test/column.test.tsx b/packages/jsx-email/test/column.test.tsx
index fe056ba8..ce69e3c8 100644
--- a/packages/jsx-email/test/column.test.tsx
+++ b/packages/jsx-email/test/column.test.tsx
@@ -30,4 +30,14 @@ describe(' component', () => {
const actualOutput = await jsxToString(Lorem ipsum);
expect(actualOutput).toMatchSnapshot();
});
+
+ it('renders correctly with background color', async () => {
+ const actualOutput = await jsxToString(Lorem ipsum);
+ expect(actualOutput).toMatchSnapshot();
+ });
+
+ it('renders correctly with background image', async () => {
+ const actualOutput = await jsxToString(Lorem ipsum);
+ expect(actualOutput).toMatchSnapshot();
+ });
});
| |