Doesn't render properly in office 365 outlook

[clinton-origin]

I was reading the notes and it says this works with all modern email clients and I quote "we provide graceful fallbacks for older or less popular email clients"

This doesn't seem to be the case, because my tests with this version of Outlook, which isn't that old and still receives updates, cannot even render the buttons properly.

Has anyone else noticed this it's a pretty big blocker and going to require a large rewrite of the code by the looks of it.

[clinton-origin]

The solution just in case anyone else has this problem, which should be everyone because this email program is popular, was to refactor all the modules to use tables to wrap the elements instead of divs.

[RexYao97]

yes, it should be wrap the element with table.
In my project, I have use a PaddingWrap to fix this problem.

//PaddingWrap.tsx
export const PaddingWrap = ({
  children,
  style,
}: {
  children: JSX.Element;
  style: z.infer<typeof styleProps>;
}) => {
 // ……
  return (
    <table
      border={0}
      cellPadding={0}
      cellSpacing={0}
      width={'100%'}
      style={{
        maxWidth: '100%',
        ...bgSt,
        ...wrapperStyle,
      }}
      className={`${bgClass} ${wrapperClass}`}
    >
      <tbody>
        <tr>
          <td style={paddingLeftStyle} className={paddingLeftClassName}></td>
          <td
            className={paddingXClass}
            style={{
              ...paddingXStyle,
              wordBreak: 'break-word',
            }}
          >
            {children}
          </td>
          <td style={paddingRightStyle} className={paddingRightClassName}></td>
        </tr>
      </tbody>
    </table>
  );
};

// block-avatar.tsx
import { PaddingWrap } from '../component/PaddingWrap';

function getBorderRadius(
  shape: 'circle' | 'square' | 'rounded',
  size: number,
): number | undefined {
  switch (shape) {
    case 'rounded':
      return size * 0.125;
    case 'circle':
      return size;
    case 'square':
    default:
      return undefined;
  }
}

export const AvatarPropsDefaults = {
  size: 64,
  imageUrl:
    'https://banking-aka-storage.uat.seabank.ph/seabank/dbp/public_service/dev1/e52728ce-0ca3-4fd3-a363-a64f326ffabd.jpeg',
  alt: '',
  shape: 'square',
} as const;

export function Avatar({ desktopStyle, mobileStyle, props }: AvatarProps) {
 // ……

  return (
    <PaddingWrap
      style={{
        desktopStyle,
        mobileStyle,
      }}
    >
      <img
        alt={alt}
        src={imageUrl}
        height={size}
        width={size}
        style={{
          outline: 'none',
          border: 'none',
          textDecoration: 'none',
          objectFit: 'cover',
          height: size,
          width: size,
          maxWidth: '100%',
          display: 'inline-block',
          verticalAlign: 'middle',
          textAlign: 'center',
          borderRadius: getBorderRadius(shape, size),
        }}
      />
    </PaddingWrap>
  );
}