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

Question

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?

Your container has a class on it. Why aren't you using that? — isherwood
– isherwood, Commented Mar 24, 2022 at 19:19
Or are you asking how to scope CSS to a particular instance of a component? — isherwood
– isherwood, Commented Mar 24, 2022 at 19:21
@isherwood I've tried to add .home-page-container.h1 selector but it doesn't seem to work — Allennick
– Allennick, Commented Mar 24, 2022 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
– isherwood, Commented Mar 24, 2022 at 19:28
You're right, I'll definitely read the fundamentals of selectors again! Thanks :D — Allennick
– Allennick, Commented Mar 24, 2022 at 19:28

Salwa A. Soliman · Accepted Answer · 2022-03-29 23:45:19Z

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

answered Mar 29, 2022 at 23:45

Salwa A. Soliman

7661 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related