es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo modificar el estilo del módulo CSS a través de Javascript

24 Jul, 2023 Programación

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;
  }
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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

    import { useState, useEffect } from 'react';
import classes from "./TimeSlot.module.scss";
import AvailabilityCalendarData from "../../../../../FakeDB/AvailabilityCalendarData";

function TimeSlot() {
  const [numRows, setNumRows] = useState(17);

  useEffect(() => {
    setNumRows(6);
  }, []);

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

  return (
    <div classname="{classes.time_interval}" style="{{" gridtemplaterows:="" `repeat(${numrows},="" 1fr)`="" }}="">
      {timeSlotRow}
    </div>
  );
}

export default TimeSlot;

    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.

Comments are closed.