Blazor: subcomponente deep:: la modificación de estilo no es válida

material

Aislamiento de CSS de Blazor

En pocas palabras, se debe agregar un div a la capa exterior y no se puede reconocer sin agregar un div.

codigo invalido

    <Layout ShowFooter="true" class="Layout" SideWidth="100px">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">User</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>

codigo valido

<div>
    <Layout ShowFooter="true" class="Layout" SideWidth="100px">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">User</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</div>