CSS isolation not working for Ant Design Blazor components

Describe the bug

CSS Isolation, which is new in .NET 5, does not work with Ant Design Blazor Components. Styles which are defined in the Component with “<style></style>” are working but if they are defined in the *.razor.css file of the Component the styles does not get applied.

Steps to reproduce

Create a new razor component “Test.razor” and copy the code below in that file. Now when you navigate to “/test” the layout is shown correctly. Now add “Test.razor.css” file and cut the contents with in the “<style></style>” brackets and paste it in the just created CSS file. Now the styles are not applied when navigating to “/test”.

@page "/test"

<Layout Class="layout">
    <Header>
        <div class="logo" />
        <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Horizontal" DefaultSelectedKeys=@(new[]{"2"})>
            <MenuItem Key="1">nav 1</MenuItem>
            <MenuItem Key="2">nav 2</MenuItem>
            <MenuItem Key="3">nav 3</MenuItem>
        </Menu>
    </Header>
    <Content Style="padding: 0 50px;">
        <Breadcrumb Style="margin: 16px 0;">
            <BreadcrumbItem>Home</BreadcrumbItem>
            <BreadcrumbItem>List</BreadcrumbItem>
            <BreadcrumbItem>App</BreadcrumbItem>
        </Breadcrumb>
        <div class="site-layout-content">Content</div>
    </Content>
    <Footer Style="text-align: center; ">Ant Design ©2018 Created by Ant UED</Footer>
</Layout>

<style>
    .site-layout-content {
        background: #fff;
        padding: 24px;
        min-height: 280px;
    }
    #components-layout-demo-top .logo {
        width: 120px;
        height: 31px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px 24px 16px 0;
        float: left;
    }
</style>

Further technical details

• 0.4.0-nightly-2010251512
• Visual Studio Community 2019 Preview (16.8.0 Preview 5.0)
• Output of dotnet --info:

.NET SDK (reflecting any global.json):
 Version:   5.0.100-rc.2.20479.15
 Commit:    da7dfa8840

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19041
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\5.0.100-rc.2.20479.15\

Host (useful for support):
  Version: 5.0.0-rc.2.20475.5
  Commit:  c5a3f49c88

.NET SDKs installed:
  3.1.403 [C:\Program Files\dotnet\sdk]
  5.0.100-rc.2.20479.15 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.All 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.0-rc.2.20475.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.0-rc.2.20475.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.0-rc.2.20475.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

[Zonciu]

Blazor only adds the scope attribute to native html elements. If the root element of your component is a custom component instead of a native HTML element, such as <div>, then the scope attribute will not be added, so the ::deep modifier will not work as expected.

Conclusion:

1. For native element, write css in {ComponentName}.razor.css
2. To applay css in child component, parent component needs to add a native html element to wrap it self.

Example:

• Test.razor

@page "/test"
<div>
    <Layout Class="layout">
        <Header>
            <div class="logo" />
            <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Horizontal" DefaultSelectedKeys=@(new[]{"2"})>
                <MenuItem Key="1">nav 1</MenuItem>
                <MenuItem Key="2">nav 2</MenuItem>
                <MenuItem Key="3">nav 3</MenuItem>
            </Menu>
        </Header>
        <Content Style="padding: 0 50px;">
            <Breadcrumb Style="margin: 16px 0;">
                <BreadcrumbItem>Home</BreadcrumbItem>
                <BreadcrumbItem>List</BreadcrumbItem>
                <BreadcrumbItem>App</BreadcrumbItem>
            </Breadcrumb>
            <div class="site-layout-content">Content</div>
        </Content>
        <Footer Style="text-align: center; ">Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
</div>

• Test.razor.css

::deep .site-layout-content {
    background: #fff;
    padding: 24px;
    min-height: 280px;
    color: red;
    font-size: 36px;
}
::deep .ant-layout-footer {
    background-color: #2f54eb;
}

• In Pages/_Host.cshtml, add <link href="{PROJECT NAME}.styles.css" rel="stylesheet">, the placeholder {PROJECT NAME} is the referenced package or product name., like: <link href="BlazorTest.styles.css" rel="stylesheet">

Result

[szmalec]

@4nTrax Have you tried to wrap all markup content in one root div element and then use ::deep modifier in css styles?

@page "/counter"
<div> <!-- root div wrapper -->
   <!-- markup -->
</div>

/*...*/
::deep .site-layout-content {
    background: #fff;
    padding: 24px;
    min-height: 280px;
}
/*...*/

In result blazor will render one root div in form similar to:

<div b-r4pn4kxzo2>
  <!-- content -->
</div>

and in BlazorApp1.Client.styles.css:

[b-r4pn4kxzo2] .site-layout-content {
    background: #8e0707;
    padding: 24px;
    min-height: 280px;
}