How to apply css modules in dangerously set Inner html in react?

Question

I have html stored in the database and I want to render it on my react page and for that I used

import low from "../css/low.module.css";
<div dangerouslySetInnerHTML={{__html: data}}/>

and this works perfectly. I am also using css modules and I want this html (from database) to detect the css. I can not use cssFileName.className as it is stored in the database.

For example

data = <div class="news_page_detail">
<p class="news_page_detail">My Para1<br class="Pc_only">My Para2</p>
<p class="news_page_detail">My Para3</p>
<p class="news_page_detail">My Para4
</p>
<a href="/someLink" class="btn-pink-b ovbg ">
<div class="btn-inner">
<div class="ovbg_pink"></div>
<span class="btn-pink-b-txt">My span1</span>
</div>
</a>

Is there any solution so that I apply the css modules here. I dont want to import the css as conventional way because they are interfering with the other css. Please help.

ItecStudent · Accepted Answer · 2022-11-25 10:30:46Z

0

You can try the html-react-parser library. I have used it and I can style inline my content.

 import parse from 'html-react-parser'

 <div
      style={{ color: 'black' }}
 >
     {parse(item?.content)}
 </div>

answered Nov 25, 2022 at 10:30

ItecStudent

92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anonymous Over a year ago

Lets say I have className myClassName in low.module.css and data = <div class="myClassName"></div>. So How I can apply this css ?

ItecStudent Over a year ago

try <div className="myClassName>{parse(data}</div>

Collectives™ on Stack Overflow

How to apply css modules in dangerously set Inner html in react?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related