Enhance the visual appeal of your email templates in JSX Mail using our extensive selection of style properties. Tailor each element to fit your design needs with these customizable options:
type ElementStyle = {
backgroundColor?: string;
border?: string;
boxSizing?: string;
borderBottom?: string;
borderBottomColor?: string;
borderBottomStyle?: string;
borderBottomWidth?: string;
borderColor?: string;
maxWidth?: string;
borderRadius?: string;
maxHeight?: string;
borderLeft?: string;
borderLeftColor?: string;
borderLeftStyle?: string;
borderLeftWidth?: string;
borderRight?: string;
borderRightColor?: string;
borderRightStyle?: string;
borderRightWidth?: string;
borderStyle?: string;
borderTop?: string;
borderTopColor?: string;
borderWidth?: string;
margin?: string;
marginBottom?: string;
marginLeft?: string;
marginRight?: string;
marginTop?: string;
color?: string;
display?: 'block' | 'inline-block' | 'inline';
font?: string;
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
letterSpacing?: string;
lineHeight?: string;
listStyleType?: string;
padding?: string;
paddingBottom?: string;
paddingLeft?: string;
paddingRight?: string;
paddingTop?: string;
textAlign?: string;
textDecoration?: string;
textIndent?: string;
textTransform?: string;
verticalAlign?: string;
width?: string;
height?: string;
};
Incorporate these styles directly into your JSX Mail tag by setting the style property with your desired style object.
<a style={{ color: 'red' }}>Hello</a>
Each property offers you the flexibility to craft the exact look and feel for your email templates, making your emails not just communicative but also visually compelling.
