-1

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?

isherwood
  • 52,576
  • 15
  • 105
  • 143
Allennick
  • 177
  • 7
  • 1
    Your container has a class on it. Why aren't you using that? – isherwood Mar 24 '22 at 19:19
  • Or are you asking how to [scope CSS to a particular instance of a component](https://stackoverflow.com/questions/50849070/how-to-add-scoped-css-in-react)? – isherwood Mar 24 '22 at 19:21
  • @isherwood I've tried to add .home-page-container.h1 selector but it doesn't seem to work – Allennick Mar 24 '22 at 19:27
  • That's because you're not doing a child selector correctly. Your selector looks for an element with both classes, not one inside the other. I suggest a stroll through the fundamentals of CSS. – isherwood Mar 24 '22 at 19:28
  • You're right, I'll definitely read the fundamentals of selectors again! Thanks :D – Allennick Mar 24 '22 at 19:28
  • Also, `h1` isn't a class, so it won't have a dot. – isherwood Mar 24 '22 at 19:28

1 Answers1

0

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

Salwa A. Soliman
  • 394
  • 2
  • 8