Magento2 How to apply CSS on static block class in PWA

[Hitesh Koshti]

I have created one Static block and added below content in :

<div class="hero-banner"><img src="{{media url='banner.jpg'}}" alt="" width="1251" height="343"></div>

Called this static block in CMS page

{{block class="Magento\\Cms\\Block\\Block" block_id="hero-banner"}}

How can I apply css on hero-banner class in PWA ?

[Sreedarsh]

Hi @Hitesh Koshti 

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

One easy way, is to call your content inside a div with some class as below.

<div className={styles.heroBanner}> 
<!--Your Block here -->
</div>

Then import the css file into your component as :

import styles from './css-file.css';

Give styles to the css:

.heroBanner div{
    /*css property*/
}

 The div in css above, is holding the hero-banner class.

[Sreedarsh · Accepted solution]

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*/
}

[Aneeshvr]

I the righ way to give this :global , no other way to call class?

---

@Sreedarsh wrote:

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*/
}

---