Estoy trabajando en un proyecto de reacción y encontré este problema. Estoy pasando mi nombre de clase personalizado ${row.customClass} al componente y estoy tratando de aplicar el mismo estilo que se muestra en la siguiente sección de CSS. cuando revisé las herramientas de desarrollador, puedo ver que la muestra de clase se agregó junto con otra clase como se muestra en la sección HTML. pero el estilo no se aplica para la muestra de clase personalizada. todos los demás estilos se están aplicando. ¿Alguien puede decirme qué está mal?
return ( <tr key={index}> { rows.map((row, index) => { return <td key={index} className={`${classes.row} ${!row.status ? classes.disableRow : "" }${row.customClass}`}> <customComponent></customComponent></td> }) } </tr> )CSS
const useStyles = makeStyles( (theme) => ({ row: { padding: "10px", "& span": { wordBreak:"break-all" } }, disableRow: { color: "grey" }, sample:{ background:"red", } }) );HTML
<td class="makeStyles-row-42 sample"> <span>Data123</span></td>Está pasando a classNames la clave 'muestra' en lugar de pasarle la clave asociada con la clase que crea con makeStyles.
Por ejemplo, mire las otras clases que agrega, lo hace
${classes.row}No
${'row'}Si desea obtener la clase asociada con "muestra" en su makeStyles, debe hacer esto:
rows.map((row, index) => { return <td key={index} className={`${classes.row} ${!row.status ? classes.disableRow : "" }${classes[row.customClass]}`}> <customComponent></customComponent></td> }) }Donde fila.customClass debe ser 'muestra'
Creo que tu problema es que te falta espacio. intente agregar espacio entre ${!row.status? clases.disableRow: ""} y ${clases[fila.customClass]}