Hi guys instead of styling in the init in this way... it's possibile to use a scss file in canvas? canvas { style:['FILE.SCSS'] } or simple make it cleaner with a single init css? Thank you! myComponent.append( body { background: rgb(204,204,204); } .footer { position: absolute; bottom: 5mm; width: auto; left: 5mm; right: 5mm; } .footer-container { padding: 7px 88px 7px 96px; } .footer-text:nth-child(2) { float:right; } .footer-text { font-size: 11px; } .logo-noovle img{ height: 41px; wi...

Issue #3326✓ SolvedOpened Mar 9, 2021by devtechk2 reactions

style-manager components question canvas

Canvas style css

Quick answerby artf❤ 2

You can use canvasCSS option if you don't want to use files.

Question

Hi guys instead of styling in the init in this way... it's possibile to use a scss file in canvas? canvas { style:['FILE.SCSS'] } or simple make it cleaner with a single init css? Thank you! myComponent.append(<style> body { background: rgb(204,204,204); } .footer { position: absolute; bottom: 5mm; width: auto; left: 5mm; right: 5mm; } .footer-container { padding: 7px 88px 7px 96px; } .footer-text:nth-child(2) { float:right; } .footer-text { font-size: 11px; } .logo-noovle img{ height: 41px; width: 211px; } .logo-placeholder img{ float: right; height: 68px; width: 191px; } .page { background:...

Answers (3)

👍 Most helpfulartf• Mar 21, 2021

You can use canvasCSS option if you don't want to use files.

devtechk• Mar 21, 2021

Thank you very much! This config file is gonna help me a lot!

GJSBlock• May 17, 2026

Thanks for reporting this, @devtechk. Great question about canvas style css. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listener method Most operations can be achieved by li...

View full discussion on GitHub →