Adding custom styles to element using ID.
Question
What are you trying to add to GrapesJS? Adding custom styles (like background) to element using ID.
Is there an alternative at the latest version?
[ ] Yes (descripe the alternative) [X] No
Is this related to an issue?
[ ] Yes (Give a link to the issue) [X] No
Answers (2)
The proper way would be this:
const compById = editor.getWrapper().find('#i9x9h')[0];
compById && compById.addStyle({ 'background-color': '...' });
Hi @BerkeAras !
Apparently it is undocumented but editor.Components.allById() might be what you're looking for, eg:
editor.Components.allById()['your-id'].set('style', {'background-color': 'red'});
Hope this will help, cheers :) !
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4496
setStyle
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome latest versionReproducible demo link...
Issue #4654
Custom component for text node including special characters
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v105 Reproducible demo link https:/...
Issue #4575
Custom is missing in the AssetManagerConfig
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link this is a co...
Issue #4082
Remove some initial styles from frame canvas
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96 Reproducible demo link No demo...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.