Necesito representar algunas etiquetas jsx con estilo en mi componente usando el gancho useTranslation y peligrosamente SetInnerHTML, esas etiquetas se almacenan en un archivo json, descubrí que peligrosamente SetInnerHTML funciona bien pero no aplique estilos de viento de cola para cada etiqueta,
archivo json:
{ "about-text":"<div className='text-blue px-5'><p>Text ...</p</div>", }componentes internos:
<div className="p-10"> <div dangerouslySetInnerHTML={{ __html: t('about-text'), }} /> </div>dangerouslySetInnerHTML espera que se le pase una cadena de HTML, no una cadena de JSX.
El atributo class se usa directamente. No puede ajustar la propiedad className en su lugar.