Customization
The ChannelFeed component has fixed internal styling. Customize by wrapping in a container.
Styling Limitations
What You Can Customize
Container Level Only:
✅ Dimensions (width, height)
✅ Spacing (padding, margin)
✅ Borders and shadows
✅ Layout positioning
What You Cannot Customize
Internal Styling:
❌ Color scheme (dark theme only)
❌ Typography (fonts, sizes)
❌ Component layout structure
❌ Buttons, avatars, text styles
The component maintains consistent styling for functionality and accessibility.
Container Patterns
Basic Wrapping
Control dimensions and spacing:
{/* Centered with max-width */}
<div className="w-full max-w-2xl mx-auto">
<ChannelFeed handle="announcements" />
</div>
{/* Full-width */}
<div className="w-full">
<ChannelFeed handle="community" />
</div>
{/* Full-height */}
<div className="h-screen">
<ChannelFeed handle="support" />
</div>
{/* With borders */}
<div className="border rounded-lg overflow-hidden">
<ChannelFeed handle="updates" />
</div>Responsive Layout
<div className="w-full md:w-3/4 lg:w-1/2 mx-auto">
<ChannelFeed handle="responsive" />
</div>Common Layouts
Sidebar
<div className="flex h-screen">
<div className="flex-1">
<YourMainContent />
</div>
<div className="w-96 border-l">
<ChannelFeed handle="activity" />
</div>
</div>Tabs
<Tabs>
<TabsList>
<TabsTrigger value="announcements">Announcements</TabsTrigger>
<TabsTrigger value="general">General</TabsTrigger>
</TabsList>
<TabsContent value="announcements">
<ChannelFeed handle="announcements" />
</TabsContent>
<TabsContent value="general">
<ChannelFeed handle="general" />
</TabsContent>
</Tabs>Performance
Multiple Instances: Each feed maintains separate state and API connections. Limit visible feeds:
{/* Good: Single feed */}
<ChannelFeed handle="main" />
{/* Okay: 2-3 feeds in grid */}
<div className="grid grid-cols-2 gap-4">
<ChannelFeed handle="feed1" />
<ChannelFeed handle="feed2" />
</div>
{/* Avoid: 4+ simultaneous feeds - use tabs instead */}CSS Isolation
Component styles use deva- prefix to avoid conflicts with your CSS:
.deva-bg-black { background-color: #000; }
.deva-text-white { color: #fff; }This means you can safely use ChannelFeed with any CSS framework.
Related
Last updated