Static Block stylesheet is not applied in PWA

Question

I have created one CMS block in my admin panel and want to display it on my PWA homepage. I have added below code in my RootComponents/CMS/CMS.js file.

import React, { Component } from 'react';
import CmsBlock from 'src/components/CmsBlock';
import './cmsPage.css';
import {bool, shape, string} from "prop-types";
export default class CMS extends Component {
 render() {
 return (
 <CmsBlock identifiers={'my-block-identifier'} />
 )
 }
}

It displays my block on PWA homepage.

Now, I have added some class in my cms block content and want to apply stylesheet on that class. I have imported cmsPage.css in my JS file and added my stylesheet in cmsPage.css file. But the stylesheet is not being applied to my block content on PWA page.

After debugging a little, I found that the classes in my CSS is being renamed in PWA. It appends random string around my class defined in cmsPage.css. While the class name is still actual classname in my static block content, the stylesheet is not being applied to the content.

I know I can add my stylesheet inline in my static block content but I don't want to do that. Does anyone have any idea or faced similar issue with static blocks in PWA?

Answer 1

It is not possible to call the classes directly in the template as the PWA is rendered with react components.

Inorder to apply style for your classes, you need to import the css as below:

import styles from './cmsPage.css';

Then put the cms block in a div with some class like :

<div className={styles.someClass}> 
 <CmsBlock identifiers={'my-block-identifier'} />
</div>

In your cmsPage.css define a css property for the component by specifying the component classname as:

.someClass img{
 /*some css rules here*/
 }

where the img above, is rendered from the cmsblock.

*Don't forget to export the styles component.

• Jaimin Sutariya: Thank you for your answer but I have some classes added in my admin panel static block content elements and I want to apply stylesheet on those elements.
• sreedarsh: @JaiminSutariya Please refer my answer below to get this done.

Answer 2

Inorder to style the exact class in react.Please use the code sample below in your imported css file .

:global(.your-css-classname) {
 /*some css rules here*/
}