我正在尝试使用styled-components 和save（）函数上的其他react组件，但它不起作用，样式化的组件在编辑器（编辑函数）上工作得很好，下面是我的代码块：

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>;

    },
} );

Current behavior红色方块只显示在编辑器上，前端没有显示任何内容