How can I style a FluentUI component in Blazor?

Question

I'm new to FluentUI. I just started a MAUI/Blazor hybrid app and I'm struggling to apply the styles that I want to my FluentUI components.

Styling works when I use inline styling.

For example:

<FluentHeader Style="background-color:blueviolet">
    Header text
</FluentHeader>

and this works.

But when I add a class to the component and then try to style it using mycomponent.razor.css, it does not work. Am I missing something about FluentUI? I have read the documentation and I found things like design tokens but still did not try those.

Can someone please tell me how to do this? Thanks

Using ::deep pseudo-element Give a class or id to the component like , <FluentHeader id = "fluent-header" /> then in your css file access it by using ::deep #fluent-header { background-color : red } ` and it works . you can see it here : learn.microsoft.com/en-us/aspnet/core/blazor/components/… — Sahan Rajapaksha
– Sahan Rajapaksha, Commented Apr 5 at 15:39

Sahan Rajapaksha · Accepted Answer · 2025-04-05 15:38:10Z

0

I have found a solution for this . I'm still learning about design token so I know that this is not the best solution threre it is . The reason behind this is that is a component and it renders it's own internal HTML structure . When I write styles in the scoped css for like fluentheader.razor.css those styles gets applied directly to the razor file not inside child components like <FluentHeader/> . You can apply the styles from your scoped css file by using the ::deep pseudo element

Options 1 . Using Global CSS You can include the styles inside the wwwroot folder so then those styles become accessible for components like <FluentHeader/>

2 . Using ::deep pseudo-element Give a class or id to the component like , <FluentHeader id = "fluent-header" /> then in your css file access it by using ::deep #fluent-header { background-color : red } ` and it works .

edited Apr 5 at 15:38

answered Apr 5 at 15:03

Sahan Rajapaksha

9710 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I style a FluentUI component in Blazor?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related