Estoy trabajando en un proyecto de blog next.js. Para representar el texto del blog en una página, estoy usando graphql para obtener el descuento de manera externa y luego mostrarlo en la aplicación next.js. Para hacerlo, actualmente estoy usando el paquete marked-react que funciona bastante bien. El descuento se representa en la página, pero parte del estilo parece ser torcido.

Como pregunta general de alto nivel, ¿qué tipo de estrategias puedo implementar para recuperar el descuento y luego, una vez cargado, poder analizarlo y agregar la clase necesaria, los estilos de identificación? Sospecho que lo que estoy haciendo ahora mismo no es el enfoque correcto.

Esto es lo que estoy haciendo esencialmente para que una página funcione.

 const Post = ({ postData }) => { useEffect(() => { let title = document.querySelector('h1'); title.classList.add(styles.title); let pTags = document.querySelectorAll('p'); pTags.forEach(element => { element.classList.add(styles.pad); }); let pre = document.querySelectorAll('pre'); pre.forEach(element => { element.classList.add(styles.code); }); }, []); return ( <Flex direction={'column'}> <div className={styles.container}> <Markdown>{postData.content}</Markdown> </div> </Flex> ); }; ......code..... export default Post;

Esencialmente, lo que estoy haciendo actualmente es obtener mis datos y luego uso un useEffect para aplicar estilos scss una vez que todo está cargado en el dom. Como un enfoque general general, esto funciona bastante bien, pero cuando necesito aplicar estilos más dirigidos, estoy perdido. ¿Qué otros enfoques puedo usar para lograr lo que necesito hacer, si los hay?