I am using RMWC lib in my composite components while using Story books i am not able to showcase both

[rahulrsingh09]

I am using RMWC lib in my composite components while using Story books i am not able to showcase both inside a component.

If the RMWC styles work then the component styles are stripped and if the component styles work the RMWC styles are Stripped what is the cause here.

I am using a helper html file

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import '../src/styles/styles.scss';

const StylesDecorator = (storyFn,d) => {
    console.log(storyFn,d); // testing
    return(
        <div className="mdc-typography" style={{ padding: '24px', height: '100%' }}>
            <style>{`
    body {
      margin: 0;
    }

    `}</style>
            {storyFn(d)}
        </div>
    )
}

const PortalDecorator = storyFn => (
    <>
        {storyFn()}
    </>
);

addDecorator(withKnobs);
addDecorator(StylesDecorator);
addDecorator(PortalDecorator);

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

<style>
    html,
    body,
    #root {
        height: 100%;
        min-height: 100%;
    }
</style>

This is my main.ts

const path = require('path');
module.exports = {
    stories: ['../src/**/*.stories.tsx'],
    webpackFinal: async config => {
        config.module.rules.push({
            test: /\.(ts|tsx)$/,
            loader: require.resolve('babel-loader'),
            options: {
                presets: [['react-app', { flow: false, typescript: true }]],
            },
        },
        {
            test: /\.scss$/,
            use: ['style-loader', {
                loader: "css-loader",
                options: {
                    sourceMap: true
                }
            },{
                loader: 'sass-loader',
                options: {
                    sourceMap: true,
                    sassOptions: {
                        includePaths: ['./node_modules']
                    },
                }}],
        },
        {
            test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|woff|woff2)(\?.*)?$/,
            exclude: /node_modules/,
            loader: 'file-loader',
            options: {
                name: '[path][name]-[hash].[ext]',
                outputPath: 'images/'
            },
        });
        config.resolve.extensions.push('.ts', '.tsx');
        return config;
    },
};

[rahulrsingh09]

Added a workaround for this working