Estoy usando webpack con css-loader para cargar mis estilos css y agregarlos a los componentes de React.
import styles from '../styles/cell.css'; .cell { border-radius: 50%; background-color: white; } <div className={styles.cell} />Estoy calculando el alto/ancho de la celda dinámicamente. Aquí describen cómo agregar estilos a los componentes de forma dinámica, pero preferiría hacerlo sin el atributo de estilo.
Intenté hacer esto en uno de los componentes principales pensando que podría alterar la clase css, pero eso no pareció funcionar.
import cell_styles from '../styles/cell.css'; cell_styles.width = this.cellSize + 'px' cell_styles.height = this.cellSize + 'px'¿Algún comentario sobre la mejor manera de hacer esto?
Puede probar las propiedades personalizadas de CSS en las propiedades de CSS que son dinámicas (por ejemplo, ancho y alto):
// cell.css .cell { width: var(--width); height: var(--height); }Luego, puede proporcionar los valores de las variables CSS en un contenedor principal (las variables CSS también caen en cascada):
<div style={{ '--width': `${something}px`, '--height': `${something}px` }}> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>Trátelo como un "parámetro/accesorios CSS" que se transmite a los niños.
Una cosa buena de este enfoque es que evita actualizar y volver a renderizar los componentes secundarios.
Debería usar el atributo de estilo, ese es el propósito.
import classLevelStyles from '../styles/cell.css'; const style = { width: this.calcWidth() + 'px', height: this.calcHeight() + 'px', }; <div className={classLevelStyles} style={style} />