As you can see the code i'm getting data from backend and want to render it in react js. But the problem is it is not getting the styles which are defined in sass files.It is getting the styles till right but after right the classes are not applying. Is there a way to fix it
const description = serviceGuide?.data?.[0]?.serviceGuideContent;
const htmlContent = { __html: description };
description: ( Getting from backend)
<>
<div className="description">
data here
</div>
<div className="login-card">
<img src={loginIcon} />
<button>LOGIN TO APPLY</button>
</div>
<div className="inside-left-right-wrapper">
<div className="inside-left">
<div className="services">
<div className="category-type">
<div className="category">
<div className="title">Service Category</div>
<div className="sub-title">Subsidiary</div>
</div>
<div className="type">
<div className="title">Service Type</div>
<div className="sub-title">Procedural</div>
</div>
</div>
<hr
style={{
border: "1px dashed #3A4275",
margin: "30px 0px",
}}
/>
<div className="requirements">
<div className="title">Service Pre-requirements</div>
<ul>
<li> Property must be occupied by the Tenant </li>
<li>
Tenant to register and open new account prior to
move-in; failure to register will result in continued
billing of service to owner’s
</li>
</ul>
</div>
</div>
<div className="video">
<div className="title">Video Tutorial</div>
<ReactPlayer
url={sewerage}
controls
width="100%"
height="420px"
/>
</div>
<div className="limitations">
<div className="title">Service Limitations</div>
<ul>
<li>Service applied only for Tenant</li>
<li>
Valid Tenancy Contract – At least one month duration
</li>
<li>
Application will not be proceeded if the Tenant Emirates
ID or Trade License is expired or there is no proof of
renewal application
</li>
<li>
Application will not be processed if the property is
vacant
</li>
</ul>
<hr
style={{
border: "1px dashed #3A4275",
margin: "30px 0px",
}}
/>
<div className="services-details">
<div className="title">Service Delivery Channels</div>
<div className="sub-title">
Ajman Sewerage Website or Mobile App
</div>
</div>
<hr
style={{
border: "1px dashed #3A4275",
margin: "30px 0px",
}}
/>
<div className="services-details">
<div className="title">Number of Steps / Duration</div>
<div className="sub-title">
Approval of documents submitted through Ajman Sewerage
Website and Ajman Sewerage Smart App, followed by
service activation - within 1 working day.
</div>
</div>
<hr
style={{
border: "1px dashed #3A4275",
margin: "30px 0px",
}}
/>
<div className="services-details">
<div className="title">Service Application Timing</div>
<div className="sub-title">
24/7 through Ajman Sewerage Website and Smart App
</div>
</div>
</div>
</div>
<div className="inside-right">
<div className="required-document-card">
<div className="header">
<img src={documentsIcon} />
<span>Required Documents </span>
</div>
<hr
style={{
border: "1px dashed #3A4275",
marginTop: "10px",
}}
/>
<div>
Valid Tenancy Contract (At least one month duration)
</div>
<div>Emirates ID - Residential</div>
<div>Trade License - Commercial</div>
</div>
<div className="customer-segment-card">
<div className="header">
<img src={serviceFeesIcon} />
<span>Service Fees</span>
</div>
<hr
style={{
border: "1px dashed #3A4275",
marginTop: "10px",
}}
/>
<div>Free of Charge</div>
</div>
<div className="service-fees-card">
<div className="header">
<img src={documentsIcon} />
<span>Customer Segments </span>
</div>
<hr
style={{
border: "1px dashed #3A4275",
marginTop: "10px",
}}
/>
<div>Residential</div>
<div>Commercial</div>
<div>Industrial</div>
</div>
</div>
</div>
</>
Rendering in react:
<div className="right" dangerouslySetInnerHTML={htmlContent}/>