This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
I have an AppLogin.razor component and its css file is AppLogin.razor.css. They are working fine. I have a UserLogin.razor component and its css file is UserLogin.razor.css. The working mechanism is as follows When you login from the AppLogin.razor component, it navigates to the UserLogin.razor component by NavigationManager route, but the problem is that it does not execute the css file for UserLogin.razor, but rather executes the css file for AppLogin.razor, even after moving to the UserLogin.razor component. What's the reason?
note : I have included this
<link href="AssembleName.styles.css" rel="stylesheet">
Hi,@Haneen Al-fakhry Have you checked if the identifier is generated correctly?Would you share a minimal example that could reproduce your issue?
this is my code in AppLogin.razor:
@code{
.....
var returnUrl = _navigationManager.QueryString("returnUrl") ?? "/UserLogin";
_navigationManager.NavigateTo(returnUrl);
.....
}
when I see in browser it loaded just this:
/* /Pages/Login/AppLogin.razor.rz.scp.css */
Even after navigating to UserLogin
this is my structure :
Hi,@Haneen Al-fakhry,do you mean you couldn't find /* /Pages/Login/AppLogin.razor.rz.scp.css */ in AssembleName.styles.css?
No, I mean I couldn't find /* /Pages/Login/UserLogin.razor.rz.scp.css */
in AssembleName.styles.css
Hi,@Haneen Al-fakhry,you may try clear the cache in browser and try again,it may using the cached css file.If you still have problem with this issue,would you upload a minimal project that could reproduce the issue and shared it with us?
i also have the same issue,
some styling in the css isolation works while other doesnot work
Can you show minimum sample code which can reproduce your issue?
please read the docs until you understand how css isolation works:
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0
then use the browsers CSS debug tools to see why the isolation selectors are not work as you expected
I've read but I didn't find a solution for my issue
then you understand after build there is only one css file. the isolated support is based selectors (custom attribute). as suggested above, if you can inspect the element you can see why the selector is not working. you can also check if the custom attribute was applied to the element you expected it to be applied to.
Add ==>
<link href="<Your Project Name>.styles.css" rel="stylesheet" /> into <head> of _Host.cshtml , it works.
CSS isolation only seems to work with static content, so I just slap a <style> </style> directly in when using @model.somecontent inside. I believe all the new rendering modes introduced with Blazor 8 are the culprit, but there doesn't appear to be any documentation on mixed rendering with scoped css! That said, scoped css USED to work perfectly for both server side and client side Blazor (upgrading an old version 5 to version 8 completely broke my app).
There's a bug (imo) that you need to add <div> around your razor components for css isolation to take affect
component.razor
<div>
//Existing html
</div>
This should make your css isolation work