Css not working in separate file. Only works in razor page between style tags

[Pavel]

I have a Component.razor.css where I have a split button css. I tried accessing the css via the ::deep selector but it doesn't seem to work. 

 ::deep .e-dropdown-btn, .e-dropdown-btn:focus, .e-dropdown-btn:hover, .e-dropdown-btn:active  {
    background: #298321;
    color: white;
    width: 100%;
}

[Keerthikaran Venkatachalam]

Hi Pavel,

We have checked the reported query, and the ::deep pseudo-element only works with descendant elements. We attached the screenshot for reference.

The CSS was loaded on the outside of the splitbutton component, so it is not working. To resolve this issue, render the parent div element for the splitbutton component. Please refer to the below code snippet and sample.

<div>

<SfSplitButton Content="Paste">

    <DropDownMenuItems>

        <DropDownMenuItem Text="Cut"></DropDownMenuItem>

        <DropDownMenuItem Text="Copy"></DropDownMenuItem>

        <DropDownMenuItem Text="Paste"></DropDownMenuItem>

    </DropDownMenuItems>

</SfSplitButton>

</div>

Get back to us if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: splitbutton_439483b3.zip