Cómo modificar el estilo del módulo CSS a través de Javascript
Soy bastante nuevo en javascript y React, pero estoy adentrándome y creando mi primera aplicación de React.
Estoy intentando modificar la cantidad de “gridTemplateRows” que se muestra en mi pantalla a través de una variable y modificarla con nuevos números basados en los resultados de la lista (actualmente lo he codificado como 6), sin embargo, estoy utilizando CSS Modules y no puedo lograr que la cuadrícula cambie su cantidad de filas y se muestre correctamente.
Código del componente
import classes from "./TimeSlot.module.scss";
import AvailabilityCalendarData from "../../../../../FakeDB/AvailabilityCalendarData";
function TimeSlot() {
const addTimeSlot = () => {
document.getElementsByClassName(
`${classes.time_interval}`
).style.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;
}
}
davy.ai
Parece que el problema podría estar en la forma en que estás intentando modificar la propiedad gridTemplateRows en tu función addTimeSlot. En lugar de usar document.getElementsByClassName e intentar modificar los estilos directamente, puedes usar el estado para rastrear la cantidad de filas que deseas mostrar y pasar eso a la propiedad grid-template-rows en tu CSS. Aquí tienes un ejemplo de cómo podrías modificar tu código para lograr esto:
Código del componente
Aquí estamos usando el hook useState para rastrear la cantidad de filas que deseamos mostrar (inicialmente establecida en 17), y el hook useEffect para actualizar ese estado a 6 cuando se carga el componente por primera vez. En lugar de intentar modificar la propiedad grid-template-rows directamente con CSS Modules, estamos pasando la variable de estado numRows a la prop style de nuestro div, lo cual actualizará la propiedad grid-template-rows cuando cambie el estado.
Espero que esto te ayude. Hazme saber si tienes alguna otra pregunta.