React-diagrams: How does one get the css when using a create-react-app structure?

[devszr]

I've just started playing around with react and react-diagrams. I've created a React app using create-react-app and following the demos on this site, trying to display two nodes and an edge in my app.

I've installed react-diagrams using

npm install storm-react-diagrams --save

and within my React component, I'm doing

import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DefaultPortModel, DiagramWidget } from 'storm-react-diagrams';

Now, in my render method, I return

<DiagramWidget diagramEngine={this.state.engine}/>

and this.state.engine has a few ports and models following one of the demos. The problem I have is, I'm unable to import the css required for displaying any of the react-diagrams components. I see that they get correctly rendered, but my page is just blank. I guess I need to import the css from somewhere, but, I have no clue from where to get it. I see that there is a styles.css under node-modules/storm-react-diagrams/dist in my project, but, I'm not sure if that is the right css to import in my app.

This is probably not a bug, but, I wasn't sure where else to ask this question.

Thanks.

[dixitk13]

I am using create-react-app and I use a wrapper over the element, in a file called Viewer.js, as shown below.

<DiagramWidget 
 diagramEngine={this.state.engine} 
 {..moreProps} 
/>

I use the styles like this in this Viewer.js on the top of the file

import './styles.css'
import 'storm-react-diagrams/dist/style.min.css'

I also had to write my own styles in which I over-ride these following elements without which my div would have collapsed.

  // NOTE: don't remove please
  .storm-diagrams-canvas {
    max-height: 70vh;
    min-height: 70vh;
    min-width: 90vw;
    max-width: 90vw;
  }

Hope this helps 😅

[Shamanyu]

@dixitk13 I faced this same issue as @devszr and used your css to help fix it (storm-react-diagrams 4.0.0). However, even this doesn't seem to work with version 5.0.0. Any advice?