-
Notifications
You must be signed in to change notification settings - Fork 927
Expand file tree
/
Copy pathinline-styles.tsx
More file actions
135 lines (126 loc) Β· 4.47 KB
/
inline-styles.tsx
File metadata and controls
135 lines (126 loc) Β· 4.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import {
Body,
Container,
Head,
Heading,
Html,
Preview,
Section,
Text,
} from '@react-email/components';
import { Layout } from '../_components/layout';
export const component = (
<Html>
<Head />
<Preview>Border + BorderRadius Fix Demo</Preview>
<Body>
<Container>
<Heading as="h1" style={{ textAlign: 'center', marginBottom: '32px' }}>
Border + BorderRadius Compatibility Fix
</Heading>
<Text style={{ marginBottom: '24px' }}>
This demo shows how the Section component now handles border + borderRadius combinations
with full email client compatibility using a wrapper table approach.
</Text>
{/* Example 1: Basic border + borderRadius */}
<Section
style={{
border: '2px solid #e5e7eb',
borderRadius: '8px',
padding: '16px',
marginBottom: '16px',
backgroundColor: '#f9fafb',
}}
>
<Text style={{ margin: '0', fontWeight: '600' }}>
Example 1: Basic border + borderRadius
</Text>
<Text style={{ margin: '8px 0 0 0', color: '#6b7280' }}>
This section uses both border and borderRadius, which now renders with a wrapper table
for full email client compatibility.
</Text>
</Section>
{/* Example 2: Individual border properties */}
<Section
style={{
borderWidth: '1px',
borderStyle: 'solid',
borderColor: '#3b82f6',
borderRadius: '12px',
padding: '20px',
marginBottom: '16px',
backgroundColor: '#eff6ff',
}}
>
<Text style={{ margin: '0', fontWeight: '600', color: '#1e40af' }}>
Example 2: Individual border properties
</Text>
<Text style={{ margin: '8px 0 0 0', color: '#1e40af' }}>
This section uses individual border properties (borderWidth, borderStyle, borderColor)
combined with borderRadius.
</Text>
</Section>
{/* Example 3: Different border radius values */}
<Section
style={{
border: '3px solid #10b981',
borderTopLeftRadius: '16px',
borderTopRightRadius: '8px',
borderBottomLeftRadius: '8px',
borderBottomRightRadius: '16px',
padding: '16px',
marginBottom: '16px',
backgroundColor: '#ecfdf5',
}}
>
<Text style={{ margin: '0', fontWeight: '600', color: '#065f46' }}>
Example 3: Different border radius values
</Text>
<Text style={{ margin: '8px 0 0 0', color: '#065f46' }}>
This section uses different border radius values for each corner, demonstrating
full support for complex border radius combinations.
</Text>
</Section>
{/* Example 4: No border wrapper needed */}
<Section
style={{
border: '1px solid #d1d5db',
padding: '16px',
marginBottom: '16px',
backgroundColor: '#ffffff',
}}
>
<Text style={{ margin: '0', fontWeight: '600' }}>
Example 4: Border without borderRadius (no wrapper needed)
</Text>
<Text style={{ margin: '8px 0 0 0', color: '#6b7280' }}>
This section uses only border without borderRadius, so it renders normally
without the wrapper table.
</Text>
</Section>
{/* Example 5: Only borderRadius */}
<Section
style={{
borderRadius: '8px',
padding: '16px',
marginBottom: '16px',
backgroundColor: '#fef3c7',
}}
>
<Text style={{ margin: '0', fontWeight: '600', color: '#92400e' }}>
Example 5: Only borderRadius (no wrapper needed)
</Text>
<Text style={{ margin: '8px 0 0 0', color: '#92400e' }}>
This section uses only borderRadius without border, so it renders normally
without the wrapper table.
</Text>
</Section>
<Text style={{ marginTop: '32px', fontSize: '14px', color: '#6b7280' }}>
The fix automatically detects when both border and borderRadius are used together
and applies the wrapper table approach for maximum email client compatibility.
</Text>
</Container>
</Body>
</Html>
);
export default component;