layui弹出层不显示复选框

使用弹出层展示表单，复选框单选框都没有样式

代码如下

<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form
        	,layer = layui.layer
        
        const str = `
        <div class="layui-transfer-box " id="category" data-index="0" style="width: 200px; height: 360px;">
                <div class="layui-transfer-header">
                    <input type="checkbox"
                           lay-filter="layTransferCheckbox"
                           lay-type="all" lay-skin="primary"
                           title="列表一">
                    <div style="width: 80px" class="layui-unselect layui-form-checkbox" lay-skin="primary">
                        <span>列表一</span><i class="layui-icon layui-icon-ok"></i></div>
                </div>
                <ul class="layui-transfer-data" style="height: 320px;">
                    <li>
                        <input type="checkbox" name="layTransferLeftCheck" lay-skin="primary"
                               lay-filter="layTransferCheckbox" title="李白" value="1">
                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                            <span>李白</span><i class="layui-icon layui-icon-ok"></i></div>
                    </li>
                </ul>
            </div>`
        layer.open({
            type: 1,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            shadeClose: true, //开启遮罩关闭
            content: str
        });
        
    })

</script>

解决办法：在html代码的最外层加一个class='layui-form'，如下图代码，我在最外层div添加的一个layui-form的class

const str = `
        <div class="layui-transfer-box layui-form" id="category" data-index="0" style="width: 200px; height: 360px;">
                <div class="layui-transfer-header">
                    <input type="checkbox"
                           lay-filter="layTransferCheckbox"
                           lay-type="all" lay-skin="primary"
                           title="列表一">
                    <div style="width: 80px" class="layui-unselect layui-form-checkbox" lay-skin="primary">
                        <span>列表一</span><i class="layui-icon layui-icon-ok"></i></div>
                </div>
                <ul class="layui-transfer-data" style="height: 320px;">
                    <li>
                        <input type="checkbox" name="layTransferLeftCheck" lay-skin="primary"
                               lay-filter="layTransferCheckbox" title="李白" value="1">
                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                            <span>李白</span><i class="layui-icon layui-icon-ok"></i></div>
                    </li>
                </ul>
            </div>`

最后在js代码后面渲染表单就行了

<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form
        	,layer = layui.layer
        form.on('submit(submit)', function (data) {
            ajax('/a/category', data.field)
        })
        const str = `
        <div class="layui-transfer-box " id="category" data-index="0" style="width: 200px; height: 360px;">
                <div class="layui-transfer-header">
                    <input type="checkbox"
                           lay-filter="layTransferCheckbox"
                           lay-type="all" lay-skin="primary"
                           title="列表一">
                    <div style="width: 80px" class="layui-unselect layui-form-checkbox" lay-skin="primary">
                        <span>列表一</span><i class="layui-icon layui-icon-ok"></i></div>
                </div>
                <ul class="layui-transfer-data" style="height: 320px;">
                    <li>
                        <input type="checkbox" name="layTransferLeftCheck" lay-skin="primary"
                               lay-filter="layTransferCheckbox" title="李白" value="1">
                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                            <span>李白</span><i class="layui-icon layui-icon-ok"></i></div>
                    </li>
                </ul>
            </div>`
        layer.open({
            type: 1,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            shadeClose: true, //开启遮罩关闭
            content: str
        });
        form.render()
    })

</script>