Applying text center style in the component.css file does not work for a fluent data grid PropertyColumn

[jobou363]

I'm struggling to understand how I just want to center text inside my grid column by using the component css file.

The text is not centered in this picture :

I want it like this :

I found 2 way of doing this that work but i try to understand why it's not working with the css in the component.

1. it works using <PropertyColumn Style="align-self: center"
2. it works also doing a class in the global app.css and using it PropertyColumn Class="align-self-center"
   .align-self-center { align-self: center; }
3. but if i try to use the same css class PropertyColumn Class="align-self-center2" but by defining it in the Component.razor.css instead the style is not applied to the PropertyColumn

.align-self-center2 { align-self: center; }

In chrome i found the element to have an id "[b-w6qdxfylwy]" so is there is something i don't do correctly in the css?
fluent-data-grid-cell[b-w6qdxfylwy] { text-overflow: ellipsis; }

The code of the complete fluent data grid.

`

 <TemplateColumn Align="@Align.Center" >
     <FluentButton IconStart="@(new Icons.Regular.Size20.Link())" OnClick="@(() => NavigateToWithParameter(TaskAction, context.PlanEntityId))">
         @TaskAction?.ActionProperties.GetDescription()
     </FluentButton>
 </TemplateColumn>

 <PropertyColumn Class="align-self-center" Title="@Localization.Abreviation"  Property="@(p => p.Abbreviation)" Align="Align.Start" Sortable="true"/>
 <PropertyColumn Class="align-self-center2" Title="@Localization.Description" Property="@(p => p.Description)" Align="Align.Start" Sortable="true"/>

`

The component css file
.align-self-center2 {
align-self: center !important;
}

[vnbaaij]

It doesn't work because of the scoping that happens when you use isolated CSS. Nor really a Datagrid or Fluent issue. It's a general Blazor consequence. Learn more about that at https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0