如何通过 Javascript 修改 CSS 模块样式

Question

I'm fairly new to javascript and react, but I'm diving in and creating my first react app.

I'm tying to modify the amount of "gridTemplateRows" that display on my screen via a variable and modify it with a new numbers based on the results from the list (I've hard coded this as a 6 right now), however I'm using CSS Modules and i can't seem to get the grid to change its row count and display properly.

Component Code

import classes from "./TimeSlot.module.scss";
import AvailabilityCalendarData from "../../../../../FakeDB/AvailabilityCalendarData";

function TimeSlot() {
  const addTimeSlot = () => {
    document.getElementsByClassName(
      `${classes.time_interval}`
    ).styles.gridTemplateRows = "repeat(6, 1fr)";
  };

  const timeSlotRow = AvailabilityCalendarData.map((timeSlot) => (
    <div key={timeSlot.id}>{timeSlot.startTime}</div>
  ));

  return (
    <div className={classes.time_interval} onLoad={addTimeSlot()}>
      {timeSlotRow}
    </div>
  );
}

export default TimeSlot;

CSS

.time_interval {
  grid-area: time;
  display: grid;
  grid-template-rows: repeat(17, 1fr);
  font-size: 14px;
  & > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 1px 0 0 #eceff1;
  }
}

Answer 1

Just set the style :

<div className={classes.time_interval} 
  style={{ gridTemplateRows: `repeat(${timeSlotRow.length}, 1fr)` }}
>{timeSlotRow}</div>

Or you could take a look atgrid-auto-rows .