Blazor: subcomponent deep:: style modification is invalid

material

Blazor CSS Isolation

To put it simply, a div needs to be added to the outer layer, and it cannot be recognized without adding a div.

invalid code

    <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>

valid code

<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>