ant-design-blazor: 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]

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 27 (27 by maintainers)

Commits related to this issue

docs(faq): CSS isolation explanation (#2158) Add explanation on how to use CSS isolation with AntDesign Blazor components. #1822 #732 — committed to ant-design-blazor/ant-design-blazor by dennisrahmen 3 years ago
docs(faq): CSS isolation explanation (#2158) Add explanation on how to use CSS isolation with AntDesign Blazor components. #1822 #732 — committed to ant-design-blazor/ant-design-blazor by dennisrahmen 3 years ago
docs(faq): CSS isolation explanation (#2158) Add explanation on how to use CSS isolation with AntDesign Blazor components. #1822 #732 — committed to ant-design-blazor/ant-design-blazor by dennisrahmen 3 years ago
docs(faq): CSS isolation explanation (#2158) Add explanation on how to use CSS isolation with AntDesign Blazor components. #1822 #732 — committed to ant-design-blazor/ant-design-blazor by dennisrahmen 3 years ago

Most upvoted comments

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:

For native element, write css in {ComponentName}.razor.css
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

Zonciu on Dec 5, 2020

The issue is here: https://github.com/dotnet/aspnetcore/issues/28443 Not sure when will fix this.

Zonciu on Aug 2, 2021

@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;
}

szmalec on Dec 3, 2020

@dennisrahmen thank you.

Unfortunately, the warning still pops up. But I guess it’s a problem with my machine and not the project itself, as you stated

Can´t find any issues with the ::deep.

above.

::deep is not a standard css grammar, it is a mark for the Blazor css processor, just ignore the IDE warning. See document: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#child-component-support

Zonciu on Aug 2, 2021

@dennisrahmen thank you.

Unfortunately, the warning still pops up. But I guess it’s a problem with my machine and not the project itself, as you stated

Can´t find any issues with the ::deep.

above.

baltermia on Aug 2, 2021