Scoped CSS files are not applying their styles in Razor Class Library Components

Question

A component in a Razor Class Library has it's scoped CSS file, but the classes in there are not being applied. Even the CSS class name my-component found in the out-of-the-box component Component1.razor does not apply to its styles defined in the Component1.razor.css

I want to make reusable components to be consumed by a separate Blazor Project. The lack of styling from a scoped CSS file is confusing to me because I was used to scoped CSS files in Blazor Server Apps. What could be the problem? Is there any solution to this?

Component1.razor code

<div class="my-component">
    This component is defined in the <strong>Demo</strong> library.
</div>

Component1.razor.css class styles

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Consuming the component

<Component1><Component1/>

The result is just plain text: This component is defined in the Demo library.

Provider: Razor Class Library targeting .NET 6.0

Consumer: Blazor Server App targeting .NET 6.0

I hope to get some light on this.