relevant code for ngClass.xs or md in reactjs

I’m porting an angular app to reactjs. almost work done but stuck at one point.

Here’s my code:

<div class="no-js one-page-layout sound-effects"
     [ngClass]="{'is-card-loaded loaded is-card-open is-card-opened':isCardOpen,
     'is-ajax-page-active is-ajax-page-loaded': isSectionOpen}"
     [ngClass.xs]="{'is-card-loaded loaded is-card-open is-card-opened':true,
     'is-ajax-page-active is-ajax-page-loaded': isSectionOpen}"
     [ngClass.md]="{'is-card-loaded loaded is-card-open is-card-opened':true,
     'is-ajax-page-active is-ajax-page-loaded': isSectionOpen}">
  <router-outlet></router-outlet>
</div>
[ngClass.xs] available in angular flexlayout https://github.com/angular/flex-layout/wiki/ngClass-API

In the above code, if the screen is small or medium, then the following classes are added by default is-card-loaded loaded is-card-open is-card-opened but I couldn’t find a relevant code in reactjs. My question is, Is there any way to add those classes by default when the screen is small or medium?

Source: ReactJs