How Do I style the draft-js-plugins/image using css?

Question

I am using the @draft-js-plugins/image to display image in my react application. It is working but I can't seem to understand how to style the plugin so as the style my images that are displayed. I read through the documentation and I read that:

The plugin ships with a default styling available at this location in the installed package: node_modules/@draft-js-plugins/image/lib/plugin.css

When I checked this location, the plugin.css is empty. How do I apply style to the images that are displayed by the plugin? My images are covering the entire page.

Answer 1

You can target the images inside the draft.js editor on your component stylesheet. Here is an example screenshot using scss:

Screenshot: targeting draft.js editor using scss

Here is the code block

.DraftEditor-root {
  figure {
      margin-block-start: .5em;
      margin-block-end: .5em;
      margin-inline-start: 0;
      margin-inline-end: 0;
  }
img {
    width: 100%;
    // height: 200px;
    object-fit: cover;
}

}