How to use the netlify-cms.registerPreviewStyle function in netlify-cms

manager.forEach(reg => {
        reg.forEach(val => {
          sheets += val.sheet.toString();
        });
      });
      CMS.registerPreviewStyle(sheets.toString(), { raw: true });
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <template>;
    }
  }
  return withRoot(StyledTemplate);
}

CMS.registerPreviewStyle(globalStyles);
CMS.registerPreviewTemplate('home', withPreviewStyles(HomePagePreview));
CMS.registerPreviewTemplate('about', withPreviewStyles(AboutPagePreview));
CMS.registerPreviewTemplate('blog', withPreviewStyles(BlogPostPreview));
</template>

import './boot'
import 'netlify-cms/dist/cms.css'
import { config } from './config'
import CMS, { init } from 'netlify-cms'
import NetlifyCMSWidgetColor from 'netlify-cms-widget-color'
import NetlifyCMSWidgetNativeColor from 'netlify-cms-widget-native-color'
import * as NetlifyCMSWidgetMaterialIcons from 'netlify-cms-widget-material-icons'
import * as NetlifyCMSWidgetFontawesome from 'netlify-cms-widget-fontawesome'

CMS.registerWidget('color', NetlifyCMSWidgetColor)

CMS.registerWidget('native-color', NetlifyCMSWidgetNativeColor)

CMS.registerWidget('material-icons', NetlifyCMSWidgetMaterialIcons.Control, NetlifyCMSWidgetMaterialIcons.Preview)
CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons')

CMS.registerWidget('fontawesome-solid', NetlifyCMSWidgetFontawesome.Solid, NetlifyCMSWidgetFontawesome.Preview)
CMS.registerWidget('fontawesome-regular', NetlifyCMSWidgetFontawesome.Regular, NetlifyCMSWidgetFontawesome.Preview)
CMS.registerWidget('fontawesome-brands', NetlifyCMSWidgetFontawesome.Brands, NetlifyCMSWidgetFontawesome.Preview)

init({ config })

import PostsPreview from './previews/posts';

init({
	config: {
		...config,
		collections: [
			settingsCollection,
			authorsCollection,
			categoriesCollection,
			postsCollection,
		],
	},
});

//	load stylesheets
CMS.registerPreviewStyle(typography.toString(), {raw: true});
CMS.registerPreviewStyle(appStyles.toString(), {raw: true});

//	register widgets
CMS.registerWidget('color', ColorWidget.Control);

//	register editor components
CMS.registerEditorComponent(Code);
CMS.registerEditorComponent(Audio);
CMS.registerEditorComponent(Video);
CMS.registerEditorComponent(Image);
CMS.registerEditorComponent(Reveal);
CMS.registerEditorComponent(Calout);
CMS.registerEditorComponent(Divider);
CMS.registerEditorComponent(Gallery);
CMS.registerEditorComponent(Reference);
CMS.registerEditorComponent(Countdown);

init({
	config: {
		...config,
		collections: [
			settingsCollection,
			authorsCollection,
			categoriesCollection,
			postsCollection,
		],
	},
});

//	load stylesheets
CMS.registerPreviewStyle(typography.toString(), {raw: true});
CMS.registerPreviewStyle(appStyles.toString(), {raw: true});

//	register widgets
CMS.registerWidget('color', ColorWidget.Control);

//	register editor components
CMS.registerEditorComponent(Code);
CMS.registerEditorComponent(Audio);
CMS.registerEditorComponent(Video);
CMS.registerEditorComponent(Image);
CMS.registerEditorComponent(Reveal);
CMS.registerEditorComponent(Calout);
CMS.registerEditorComponent(Divider);
CMS.registerEditorComponent(Gallery);
CMS.registerEditorComponent(Reference);
CMS.registerEditorComponent(Countdown);
CMS.registerEditorComponent(SectionHeading);

componentDidMount() {
      const manager = this.props.pageContext.sheetsManager;
      let sheets = '';
      manager.forEach(reg => {
        reg.forEach(val => {
          sheets += val.sheet.toString();
        });
      });
      CMS.registerPreviewStyle(sheets.toString(), { raw: true });
    }
    render() {

import CMS from 'netlify-cms'
import injectPlugins from './inject-plugins'
import './preview-styles.css'

injectPlugins(CMS)
CMS.registerPreviewStyle(`cms.css`)

import React from 'react'
import CMS from 'netlify-cms'
import './cms-utils'

import { HomePageTemplate } from '../templates/HomePage'
import { AboutPageTemplate } from '../templates/AboutPage'
import { ContactPageTemplate } from '../templates/ContactPage'
import { DefaultPageTemplate } from '../templates/DefaultPage'
import { BlogIndexTemplate } from '../templates/BlogIndex'
import { SinglePostTemplate } from '../templates/SinglePost'

CMS.registerPreviewStyle('/styles.css')

CMS.registerPreviewTemplate('home-page', ({ entry }) => (
  
))
CMS.registerPreviewTemplate('about-page', ({ entry }) => (
  
))
CMS.registerPreviewTemplate('contact-page', ({ entry }) => (
  
))
CMS.registerPreviewTemplate('infoPages', ({ entry }) => (
  
))
CMS.registerPreviewTemplate('blog-page', ({ entry }) => (
  
))