snap-scroll css not working. Ive exhausted all recourses and im not able to tell whats wrong. maybe has to do with react/gatsby

Question

I am unable to get this working correctly. I dont really have a clue what im doing wrong. I set the snap start and the parent container with the snap type styling. in the project I am currently using react, gatsby, and scss.. here is my code:

index.js:

import React from "react"
import Layout from "../components/Layout"
import HomeBlocks from "../components/HomeBlocks"


export default function Home() {
  return (
    <Layout>
      <HomeBlocks number={"1"} text={"1st Row"}></HomeBlocks>
      <HomeBlocks number={"2"} text={"2nd Row"}></HomeBlocks>
      <HomeBlocks number={"3"} text={"3rd Row"}></HomeBlocks>
    </Layout>
  )
}

block component:

import React from "react"

export default function HomeBlocks(props) {
  return (
    <div className="homeblocks-container">
        <div className={`homeblocks number${props.number}`}>
            <h1>{props.text}</h1>
        </div>
    </div>
  ) 
}

global style sheet:

html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
}

// layout & navigation

.layout {
 // navigation bar and footer code left out since its long.
}

.homeblocks-container {
  width: 100%;
  height: 100%;
  scroll-snap-type: y mandatory;
  overflow: scroll;

  .homeblocks {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
  }

  .number1 {
    background-color: red;
  }
  .number2 {
    background-color: rgb(123, 255, 0);
  }
  .number3 {
    background-color: blue;
  }
}

Answer 1

1. Your .homeblocks-container div should wrap the blocks group and not each HomeBlocks component.
2. Also, the same .homeblocks-container div has a percentage value for width and height. You would want to make sure its immediate parent (which might not be body; in the snippet below it is #root) also covers the entire viewport for your code to work.

function HomeBlocks(props) {
  return (
    <div className={`homeblocks number${props.number}`}>
      <h1>{props.text}</h1>
    </div>
  ) 
}

function Layout(props) {
  return (
    <div className="homeblocks-container">
      {props.children}
    </div>
  )
}

function Home() {
  return (
    <Layout>
      <HomeBlocks number={"1"} text={"1st Row"}></HomeBlocks>
      <HomeBlocks number={"2"} text={"2nd Row"}></HomeBlocks>
      <HomeBlocks number={"3"} text={"3rd Row"}></HomeBlocks>
    </Layout>
  )
}

ReactDOM.render(
  <Home />,
  document.getElementById('root')
);

html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
}

#root {
  width: 100%;
  height: 100%;
}

.homeblocks-container {
  width: 100%;
  height: 100%;
  scroll-snap-type: y mandatory;
  overflow: scroll;
}

.homeblocks-container .homeblocks {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
}

.homeblocks-container .number1 {
  background-color: red;
}
.homeblocks-container .number2 {
  background-color: rgb(123, 255, 0);
}
.homeblocks-container .number3 {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>