lottie-node styles are not propagating in nextjs because of styled-jsx.
#778
Labels
bug
Something isn't working
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Use the below project UIDL. And generate a project in
reactandnext. 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 ofstyled-jsxWe need to create a wrapper node that takes the styles.And we should also consider why we are not using
@lottiefiles/lottie-player-reactpackage that we are currently using forcra{ "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": {} }The text was updated successfully, but these errors were encountered: