Using styled-components in the save() function on gutenberg

Question

I am trying to use styled-components and other react components on the save() function, but it is not working, the styled-component works just fine on the editor ( edit function ), here is my code for the block:

const { __ } = wp.i18n;  
const { registerBlockType } = wp.blocks;

import styled from 'styled-components';


registerBlockType( 'gutenword-blocks/posts', {
    title: 'Styled Div',
    icon: 'admin-page',
    category: 'layout',


    edit: function( props ) {
        const StyledDiv = styled.div`
            height: 300px;
            width: 300px;
            background: red;
        `;
        return <StyledDiv></StyledDiv>;
    },

    save() {
        const StyledDiv = styled.div`
            height: 300px;
            width: 300px;
            background: red;
        `;
        return <StyledDiv></StyledDiv>;

    },
} );

Expected behavior The block when added should show red square on the editor screen and on the front-end

Current behavior The red square is showing only on the editor and nothing is showing on the frontend

Answer 1

It looks like styled components relies on react to provide the CSS. Since react is not loaded on the Wordpress frontend you are not seeing any styles.

You can define your CSS inline or enqueue a stylesheet with register_block_type. Check out this link for enqueueing: Applying Styles From a Stylesheet