`lottie-node` styles are not propagating in `nextjs` because of `styled-jsx`.

[JayaKrishnaNamburu]

Use the below project UIDL. And generate a project in react and next. Both looks different. As the styles in react get's applied. But the styles in styled-jsx are not applied. This issue can be because of styled-jsx We need to create a wrapper node that takes the styles.

And we should also consider why we are not using @lottiefiles/lottie-player-react package that we are currently using for cra

{
  "name": "Political Pricey Koala",
  "globals": {
    "settings": {
      "title": "Political Pricey Koala",
      "language": "en"
    },
    "assets": [
      {
        "type": "style",
        "attrs": {
          "data-tag": {
            "type": "static",
            "content": "reset-style-sheet"
          }
        },
        "content": "html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption {  margin: 0;  padding: 0;}button {  background-color: transparent;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type=\"button\"]:-moz-focus,[type=\"reset\"]:-moz-focus,[type=\"submit\"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}html { scroll-behavior: smooth  }"
      },
      {
        "type": "style",
        "attrs": {
          "data-tag": {
            "type": "static",
            "content": "default-style-sheet"
          }
        },
        "content": "\n  html {\n    font-family: Inter;\n    font-size: 16px;\n  }\n\n  body {\n    font-weight: 400;\n    font-style:normal;\n    text-decoration: none;\n    text-transform: none;\n    letter-spacing: normal;\n    line-height: 1.15;\n    color: var(--dl-color-gray-black);\n    background-color: var(--dl-color-gray-white);\n    \n  }\n\n  \n\n  "
      },
      {
        "type": "font",
        "path": "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap",
        "attrs": {
          "data-tag": {
            "type": "static",
            "content": "font"
          }
        }
      }
    ],
    "meta": [
      {
        "name": "viewport",
        "content": "width=device-width, initial-scale=1.0"
      },
      {
        "charSet": "utf-8"
      },
      {
        "property": "twitter:card",
        "content": "summary_large_image"
      }
    ],
    "customCode": {}
  },
  "root": {
    "name": "App",
    "designLanguage": {
      "tokens": {
        "--dl-color-primary-100": {
          "type": "static",
          "content": "#003EB3"
        },
        "--dl-color-primary-300": {
          "type": "static",
          "content": "#0074F0"
        },
        "--dl-color-primary-500": {
          "type": "static",
          "content": "#14A9FF"
        },
        "--dl-color-primary-700": {
          "type": "static",
          "content": "#85DCFF"
        },
        "--dl-color-gray-black": {
          "type": "static",
          "content": "#000000"
        },
        "--dl-color-gray-500": {
          "type": "static",
          "content": "#595959"
        },
        "--dl-color-gray-700": {
          "type": "static",
          "content": "#999999"
        },
        "--dl-color-gray-900": {
          "type": "static",
          "content": "#D9D9D9"
        },
        "--dl-color-gray-white": {
          "type": "static",
          "content": "#FFFFFF"
        },
        "--dl-color-success-300": {
          "type": "static",
          "content": "#199033"
        },
        "--dl-color-success-500": {
          "type": "static",
          "content": "#32A94C"
        },
        "--dl-color-success-700": {
          "type": "static",
          "content": "#4CC366"
        },
        "--dl-color-danger-300": {
          "type": "static",
          "content": "#A22020"
        },
        "--dl-color-danger-500": {
          "type": "static",
          "content": "#BF2626"
        },
        "--dl-color-danger-700": {
          "type": "static",
          "content": "#E14747"
        },
        "--dl-size-size-xsmall": {
          "type": "static",
          "content": "16px"
        },
        "--dl-size-size-small": {
          "type": "static",
          "content": "48px"
        },
        "--dl-size-size-medium": {
          "type": "static",
          "content": "96px"
        },
        "--dl-size-size-large": {
          "type": "static",
          "content": "144px"
        },
        "--dl-size-size-xlarge": {
          "type": "static",
          "content": "192px"
        },
        "--dl-size-size-xxlarge": {
          "type": "static",
          "content": "288px"
        },
        "--dl-size-size-maxwidth": {
          "type": "static",
          "content": "1400px"
        },
        "--dl-space-space-halfunit": {
          "type": "static",
          "content": "8px"
        },
        "--dl-space-space-unit": {
          "type": "static",
          "content": "16px"
        },
        "--dl-space-space-oneandhalfunits": {
          "type": "static",
          "content": "24px"
        },
        "--dl-space-space-twounits": {
          "type": "static",
          "content": "32px"
        },
        "--dl-space-space-threeunits": {
          "type": "static",
          "content": "48px"
        },
        "--dl-space-space-fourunits": {
          "type": "static",
          "content": "64px"
        },
        "--dl-space-space-fiveunits": {
          "type": "static",
          "content": "80px"
        },
        "--dl-space-space-sixunits": {
          "type": "static",
          "content": "96px"
        },
        "--dl-radius-radius-radius2": {
          "type": "static",
          "content": "2px"
        },
        "--dl-radius-radius-radius4": {
          "type": "static",
          "content": "4px"
        },
        "--dl-radius-radius-radius8": {
          "type": "static",
          "content": "8px"
        },
        "--dl-radius-radius-round": {
          "type": "static",
          "content": "50%"
        }
      }
    },
    "styleSetDefinitions": {
      "button": {
        "type": "reusable-project-style-map",
        "content": {
          "display": {
            "type": "static",
            "content": "inline-block"
          },
          "backgroundColor": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-white"
            }
          },
          "color": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-black"
            }
          },
          "borderRadius": {
            "type": "static",
            "content": "4px"
          },
          "borderColor": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-black"
            }
          },
          "borderWidth": {
            "type": "static",
            "content": "1px"
          },
          "padding": {
            "type": "static",
            "content": "0.5rem 1rem"
          }
        },
        "conditions": []
      },
      "input": {
        "type": "reusable-project-style-map",
        "content": {
          "backgroundColor": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-white"
            }
          },
          "borderColor": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-black"
            }
          },
          "color": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-black"
            }
          },
          "borderWidth": {
            "type": "static",
            "content": "1px"
          },
          "borderRadius": {
            "type": "static",
            "content": "4px"
          },
          "padding": {
            "type": "static",
            "content": "0.5rem 1rem"
          },
          "cursor": {
            "type": "static",
            "content": "auto"
          }
        },
        "conditions": []
      },
      "textarea": {
        "type": "reusable-project-style-map",
        "content": {
          "backgroundColor": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-white"
            }
          },
          "borderColor": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-black"
            }
          },
          "color": {
            "type": "dynamic",
            "content": {
              "referenceType": "token",
              "id": "--dl-color-gray-black"
            }
          },
          "borderWidth": {
            "type": "static",
            "content": "1px"
          },
          "borderRadius": {
            "type": "static",
            "content": "4px"
          },
          "padding": {
            "type": "static",
            "content": "0.5rem"
          },
          "cursor": {
            "type": "static",
            "content": "auto"
          }
        },
        "conditions": []
      },
      "list": {
        "type": "reusable-project-style-map",
        "content": {
          "display": {
            "type": "static",
            "content": "block"
          },
          "listStyleType": {
            "type": "static",
            "content": "none"
          },
          "listStylePosition": {
            "type": "static",
            "content": "outside"
          },
          "margin": {
            "type": "static",
            "content": "1em 0px 1em 0px"
          },
          "padding": {
            "type": "static",
            "content": "0px 0px 0px 1.5rem"
          },
          "width": {
            "type": "static",
            "content": "100%"
          }
        },
        "conditions": []
      },
      "list-item": {
        "type": "reusable-project-style-map",
        "content": {
          "display": {
            "type": "static",
            "content": "list-item"
          }
        },
        "conditions": []
      },
      "teleport-show": {
        "type": "reusable-project-style-map",
        "content": {
          "display": {
            "type": "static",
            "content": "flex !important"
          },
          "transform": {
            "type": "static",
            "content": "none !important"
          }
        },
        "conditions": []
      },
      "Content": {
        "type": "reusable-project-style-map",
        "content": {
          "fontFamily": {
            "type": "static",
            "content": "Inter"
          },
          "fontWeight": {
            "type": "static",
            "content": "400"
          },
          "fontSize": {
            "type": "static",
            "content": "16px"
          },
          "lineHeight": {
            "type": "static",
            "content": "1.15"
          },
          "textTransform": {
            "type": "static",
            "content": "none"
          },
          "textDecoration": {
            "type": "static",
            "content": "none"
          }
        }
      },
      "Heading": {
        "type": "reusable-project-style-map",
        "content": {
          "fontFamily": {
            "type": "static",
            "content": "Inter"
          },
          "fontWeight": {
            "type": "static",
            "content": "700"
          },
          "fontSize": {
            "type": "static",
            "content": "32px"
          },
          "lineHeight": {
            "type": "static",
            "content": "1.15"
          },
          "textTransform": {
            "type": "static",
            "content": "none"
          },
          "textDecoration": {
            "type": "static",
            "content": "none"
          }
        }
      }
    },
    "stateDefinitions": {
      "route": {
        "type": "string",
        "defaultValue": "Home",
        "values": [
          {
            "value": "Home",
            "seo": {
              "title": "Political Pricey Koala",
              "metaTags": [
                {
                  "property": "og:title",
                  "content": "Political Pricey Koala"
                }
              ]
            },
            "pageOptions": {}
          }
        ]
      }
    },
    "node": {
      "type": "element",
      "content": {
        "elementType": "Router",
        "children": [
          {
            "type": "conditional",
            "content": {
              "node": {
                "type": "element",
                "content": {
                  "elementType": "container",
                  "semanticType": "div",
                  "referencedStyles": {},
                  "abilities": {},
                  "style": {
                    "width": {
                      "type": "static",
                      "content": "100%"
                    },
                    "minHeight": {
                      "type": "static",
                      "content": "100vh"
                    },
                    "overflow": {
                      "type": "static",
                      "content": "auto"
                    },
                    "display": {
                      "type": "static",
                      "content": "flex"
                    },
                    "flexDirection": {
                      "type": "static",
                      "content": "column"
                    },
                    "alignItems": {
                      "type": "static",
                      "content": "center"
                    }
                  },
                  "children": [
                    {
                      "type": "element",
                      "content": {
                        "elementType": "lottie-node",
                        "referencedStyles": {},
                        "abilities": {},
                        "attrs": {
                          "src": {
                            "type": "static",
                            "content": "https://presentation-website-assets.teleporthq.io/features/lottie.json"
                          },
                          "autoplay": {
                            "type": "static",
                            "content": ""
                          },
                          "speed": {
                            "type": "static",
                            "content": "1"
                          },
                          "background": {
                            "type": "static",
                            "content": "transparent"
                          }
                        },
                        "style": {
                          "width": {
                            "type": "static",
                            "content": "300px"
                          },
                          "height": {
                            "type": "static",
                            "content": "300px"
                          }
                        },
                        "children": []
                      }
                    }
                  ]
                }
              },
              "value": "Home",
              "reference": {
                "type": "dynamic",
                "content": {
                  "referenceType": "state",
                  "id": "route"
                }
              }
            }
          }
        ]
      }
    }
  },
  "components": {}
}