当我复制它时，Divi 订单类道具会出错

如何解决当我复制它时，Divi 订单类道具会出错

我在构建 Divi 自定义模块时遇到一个问题，我有一些道具：php side

public function render( $attrs,$content = null,$render_slug ) {
        $id = ET_Builder_Element::get_module_order_class( $render_slug );
        $bg_image = $this->props['bg_image'];
        $bg_image_overlay_color = $this->props['bg_image_overlay_color'];
        $text_1 = $this->props['text_1'];
        $text_1_border_color = $this->props['text_1_border_color'];
        $text_1_border_width = $this->props['text_1_border_width'];
        $text_2 = $this->props['text_2'];
        $text_2_border_color = $this->props['text_2_border_color'];
        $text_2_border_width = $this->props['text_2_border_width'];
        $animation_speed = $this->props['animation_speed'];

        return sprintf( '
        <style>
        .%1$s .rbx_hover_card_1_wrap:hover h3:after,.%1$s .rbx_hover_card_1_wrap h3:after  {
            background: %5$s;
            height: %6$spx;
        }
        
        .%1$s .rbx_hover_card_1_wrap span {
            border-right: %9$spx solid %8$s;
        }
        .%1$s .rbx_hover_card_1_wrap {
            background: %3$s;
        }
        .%1$s .rbx_hover_card_1_wrap img {
            transition: opacity %10$s,transform %10$s;
        }
        .%1$s .rbx_hover_card_1_wrap h3 {
            -webkit-transition: all %10$s;
            -o-transition: all %10$s;
            transition: all %10$s;
        }
        .%1$s .rbx_hover_card_1_wrap span {
            -webkit-transition: right %10$s,opacity %10$s;
            transition: right %10$s,opacity %10$s;
        }
        </style>
        <div class="%1$s rbx_hover_card_1_wrap">
            <img src="%2$s">
            <h3>%4$s</h3>
            <span>%7$s</span>
        </div>',$id,$bg_image,$bg_image_overlay_color,$text_1,$text_1_border_color,$text_1_border_width,$text_2,$text_2_border_color,$text_2_border_width,$animation_speed
        );
    }

} 如果我更改边框颜色或其他参数道具，它在 php 端运行良好，但在前端构建器中的 jsx 中，如果我更改边框颜色或其他参数道具。在前端它的工作完美，但在建造者方面有问题 这是 jsx：

// External Dependencies
import React,{ Component,Fragment } from 'react';

// Internal Dependencies
import './style.css';

class RBXHoverCard1JSX extends Component {

  static slug = 'rhc1ak_rbx_hover_card_1';

  render() {
    const orderClass = `${this.props.moduleInfo.type}_${this.props.moduleInfo.order}`;


    return (
      <Fragment>
         <style dangerouslySetInnerHTML={{__html: `
         
         .${orderClass} .rbx_hover_card_1_wrap h3:hover h3:after,.${orderClass} .rbx_hover_card_1_wrap h3:after  {
           background: ${this.props.text_1_border_color}!important;
           height: ${this.props.text_1_border_width}px !important;
         }
        
         .${orderClass} .rbx_hover_card_1_wrap {
           background: ${this.props.bg_image_overlay_color};
         }
         .${orderClass} .rbx_hover_card_1_wrap img {
           transition: opacity ${this.props.animation_speed},transform ${this.props.animation_speed};
         }
         .${orderClass} .rbx_hover_card_1_wrap h3 {
           -webkit-transition: all ${this.props.animation_speed};
           -o-transition: all ${this.props.animation_speed};
           transition: all ${this.props.animation_speed};
         }
         .${orderClass} .rbx_hover_card_1_wrap span {
          border-right: ${this.props.text_2_border_width}px solid ${this.props.text_2_border_color};
           -webkit-transition: right${this.props.animation_speed},opacity ${this.props.animation_speed};
           transition: right ${this.props.animation_speed},opacity ${this.props.animation_speed};
           }
            
                `}}>
          
               </style>
     
      <div className={`${orderClass} rbx_hover_card_1_wrap`}>
      <img src={this.props.bg_image} alt={this.props.text_1} />
      <h3 >{this.props.text_1}</h3>
      <span>{this.props.text_2}</span>
    </div>
    </Fragment>
    );
  }
}

export default RBXHoverCard1JSX;

有人可以帮我吗？