[英]How to Modify CSS Module Style via Javascript
我對 javascript 和反應相當陌生,但我正在潛入並創建我的第一個反應應用程序。
我想通過一個變量來修改屏幕上顯示的“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;
}
}
只需設置style
:
<div className={classes.time_interval}
style={{ gridTemplateRows: `repeat(${timeSlotRow.length}, 1fr)` }}
>{timeSlotRow}</div>
或者你可以看看grid-auto-rows 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.