asp.net-coreblazormudblazor

How do I make a Text Bold in the Mudblazor?


I am working with MudBlazor and I’ve noticed that it has many frontend classes, such as Typo and Align. I want to make text bold without using any external CSS or the <b> tag. For example, I have the following code: <MudText Typo="Typo.h1" Align="Align.Start">Welcome Back</MudText>.

How can I achieve that? Thank you!

I want it to be bold.


Solution

  • <b>is the official documented way so no other built-in class. Or you could just do inline style

    <MudText Typo="Typo.h1" Align="Align.Start" Style="font-weight:bold">Welcome Back</MudText>
    

    Or you could override the default "h1" typo in MudThemeProvider. By creating mud blazor template you should have following code in MainLayout.razor

    <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
    

    At below code you could override h1 like this

        private MudTheme? _theme = null;
    
        protected override void OnInitialized()
        {
            base.OnInitialized();
            _theme = new()
            {
                PaletteLight = _lightPalette,
                PaletteDark = _darkPalette,
                LayoutProperties = new LayoutProperties(),
                Typography = new Typography()
                {
                    H1 = new H1()
                    {                                 
                        FontWeight = 900
                    },
    
                }
            };
        }
    

    Then all the Typo.h1 will be bold without other configuration.