Issue #2141πŸ’¬ AnsweredOpened Jul 16, 2019by sarah-banyan0 reactions

How to import the external css styles，eg. boostrap.css

Quick answerby artf

Read full answer below ↓

Question

hi, thanks for your great project. I have a problem confused recently. I want to import some react components to my projects,I changed this Jsx to html through renderToStaticMarkup method,and get the result <button type="button" class="ant-btn ant-btn-primary"><span>test</span></button>and I also import this class byimport 'antd/dist/antd.css',but it didn't seem to work, so I'd like to ask you about this question, how to import the external css styles.

Answers (1)

artfβ€’ Jul 25, 2019
var editor = grapesjs.init({
  ...
  canvas: {
    styles: [
      'https://...',
      ...
    ]
  }
});
View full discussion on GitHub β†’

Related Questions and Answers

Continue research with similar issue discussions.

Issue #3347

How can I get Uncompressed JS code for me to edit?

Hi, thank you for reviewing my problem. I want to use my own JSEditor to edit html、css and js. 1、First, I use getHtml, getCss, getJs to dis...

4 answersUpdated Apr 7, 2021

Issue #2742

How to prevent unique ids generation?

Hi! Thanks for your work @artf. This is a simplified code of how I use grapesjs, I want to save the styles and then want to apply them agai...

3 answersUpdated Oct 16, 2024

Issue #3832

The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Not there De...

4 answersUpdated Sep 29, 2021

Issue #3421

How to remove class selector css rule

I'm using componentFirst set to true to let my users apply needed style to component they selected. Selecting a component which is applied...

4 answersUpdated May 12, 2021

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Tutorial

Messaging on gjs.market: talk to a studio before you buy, not after

We've launched private messaging between buyers and studios. One thread per buyer–studio pair, the whole history in one place.

Tutorial

Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)

New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps β€” a beginner-friendly 2026 comparison

Tutorial

Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor

Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component β€” click to select, then one-click fix.

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders