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

Question

我对 javascript 和 React 还很陌生，但我正在深入研究并创建我的第一个 React 应用程序。

我想通过一个变量修改屏幕上显示的“gridTemplateRows”的数量，并根据列表的结果用新数字修改它（我已经将其硬编码为 6现在），但是我正在使用 CSS 模块，我似乎无法让网格更改其行数并正确显示。

组件代码

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

只需设置 style:

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

或者你可以看看 grid-auto-rows。

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

How to Modify CSS Module Style via Javascript

javascript

css

sass

reactjs

css-modules