Managing multiple stylesheets in Blazor

Background

I am a backend developer creating a Blazor WASM website.

Problem

I am currently developing an application which is using MudBlazor. I am happy with MudBlazor and would like to continue to use it.
However, I would also like to use the HTML editor provided by Radzen.
The issue I am facing is that there are elements in the MudBlazor sytlesheet (I'm not sure exactly which ones) which are keeping the visuals in the Radzen HTML Editor from working at 100% (bullet points not appearing, indentation not quite right, etc).

With Mudblazor stylesheet active, the text editor does not work as expected

What I've Tried

To confirm that the issue is with the MudBlazor stylesheet, I have commented out the MudBlazor stylesheet in index.html, resulting in the html editor working as expected (but the rest of the website not having the MudBlazor styles). The image below shows the result: With MudBlazor stylesheet commented, the text editor works as expected
I have put the Radzen Text editor into its own component, so that there are no MudBlazor components accompanying it. From there, I have been attempting to find a way of excluding the mudblazor stylesheet from the html editor component.
- Investigated the use of Blazor CSS Isolation, but from what I can see this is designed for the use of custom css created by myself, not the use of stylesheets (please correct me if I'm wrong).
- I read somewhere that in general html the latest stylesheet will be utilised. So, in my TextEditor.razor page, add the stylesheet in an attempt to make it the last thing read:

<head>
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>

The Code:

Index.html

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Writers Friend Web App</title>
    <base href="/" />
    <!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
    <link href="css/app.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    
    <!-- Commenting the below stylesheet allows the Text Editor to work as expected -->
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />

</head>

TextEditor.razor


<head>
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
<RadzenHtmlEditor Style="min-height: 300px; margin: 1rem;"/>

@code 
{
    [Parameter]
    public Action<string> OnTextChange { get; set; }
}

What I'm looking for

I would like a way of allowing the Text Editor component to have access to the text editor stylesheet ONLY. i.e. exclude the MudBlazor stylesheet from my component.
I'm wondering if I can remove the MudBlazor stylesheet from the index.html file and include it in the section of all the other components, but this would make it messy and I would like to avoid this if possible.

Thank you in advance!

CodePudding user response：

There are several ways to manage multiple stylesheets in a Blazor application:

Use the @import directive in a single stylesheet: You can use the @import directive to import multiple stylesheets into a single file. This allows you to keep all of your styles in one place and make it easier to manage and maintain.
Use the link tag: You can use the link tag to link to multiple stylesheets in your HTML file. This is useful when you need to separate your styles into different files for organizational purposes.
Use the styles tag: You can use the styles tag to include multiple stylesheets in your Blazor component. This allows you to encapsulate styles within a specific component and make it easier to manage and maintain.
Use a CSS preprocessor: You can use a CSS preprocessor like SASS or LESS to import and manage multiple stylesheets in your application. This allows you to use variables, mixins, and other advanced features to make your styles more modular and reusable.

Ultimately, the best approach will depend on the needs of your specific application and the way you prefer to organize your styles. It's important to consider the maintainability and scalability of your styles as your application grows.

CodePudding user response：

I've been in contact with the guys at Radzen, and they offered me this workaround:

https://forum.radzen.com/t/indentation-and-bullet-points-not-working-in-html-editor/12944