Search code examples
reactjsnext.js

I am not able to apply internal/Inline style on dynamic elements in NextJs

I have a code snippet like this -

<p className="xyz" dangerouslySetInnerHTML={{__html: dynamicContent}}></p>

Inside dyanmicContent there is string and one anchor tag and I want to apply some styles on a tag, I am trying this apporach

<style jsx>{`.xyz a {border-bottom: 1px solid;}`}</style>

But this way styles in not getting applied on a tag, am I missing something?

Solution

  • Try this, if it works for you

    const styleDynamicEle =‘.xyz a { border-bottom: 1px solid; }’; 

<p className="xyz" dangerouslySetInnerHTML={{__html: dynamicContent}}></p>

<style dangerouslySetInnerHTML={{ __html: styleDynamicEle }} />