React Component for Internal CSS

1. render-css.js

/*STYLIS : https://www.npmjs.com/package/stylis*/
import {compile, serialize, stringify, middleware, prefixer} from 'stylis';

/*Process the Raw CSS*/
const getProcessedCss = (rawCss) =>{
    return serialize(compile(rawCss), middleware([prefixer, stringify]))
}

/*Render CSS inside style tag*/
const RenderCss = (props) => {
    return (
        <style>{getProcessedCss(props.children)}</style>
    );
};
export default RenderCss;

2. use-RenderCss.js

/*How to call render CSS*/

/*Import Render CSS*/
import RenderCss from "../style";

/*Component with Internal CSS*/
const ComponentWithInternalCss= (props) => {
    return (
        <>
            <RenderCss>
                {`
                        .parent-class {
                            min-height:200px;
                            .child-class{
                                color:orange;
                            }
                        }
                `}
            </RenderCss>
            <div className='parent-class'>
                <div className='child-class'>

                </div>
            </div>
        </>
    )
}
export default ComponentWithInternalCss

3. RenderCss-Output.txt

/*Output Style/CSS*/

<style>.parent-class{min-height:200px;}.parent-class .child-class{color:orange;}</style>