'How to select an element inside a React container using CSS selectors?

I have this code here:

<Grid container className={"home-page-container"}>
            <Grid item xs={1}/>
            <Grid item xs={10} >                
                <h1>Play "Monsters on the way" to earn Crypto and NFTs</h1>
                <h2>This is a project for my thesis</h2>
                <p>Nothing to say, just press PLAY and slay monsters</p>
                {/* <Unity unityContext={unityContext}
                    className={"unityCanvas hide-in-small-screen"}
                />; */}
            </Grid>
            <Grid item xs={1}/>
        </Grid>

And I have this CSS file:

h1 {
    text-align: center;
}

How can I select just the inside the Grid container using that CSS?

htmlcsscss-selectors


Solution 1:[1]

You can use => .grid but it will select all grids in your component.

However, you can give className to your grid .. then you can style it with the new class

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Salwa A. Soliman

Related Questions