在Wordpress Gutenberg保存功能中使用样式化组件

Question

我试图在save（）函数上使用styled-components 和其他react组件，但是它不起作用，样式化的组件在编辑器（edit function）上可以正常工作，这是我的代码区块：

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

    },
} );

预期的行为 添加时，该块应在编辑器屏幕和前端上显示红色方块

当前行为 红色方块仅显示在编辑器上，前端没有任何显示