css does not working

[Johnny Wang]

Bug report

css not working

• Package version(s):
• Browser and OS versions:
• Chrome is up to date
  Version 94.0.4606.81 (Official Build) (64-bit)

Steps to reproduce

1. package.json : 
       "react": "^17.0.2",
      "react-dnd": "^14.0.4",
      "react-dnd-html5-backend": "^14.0.2",
      "react-dom": "^17.0.2",
      "react-mosaic-component": "^5.0.0",
   

2. component:

import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/icons/lib/css/blueprint-icons.css';
import 'react-mosaic-component/react-mosaic-component.css';
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'
import React from 'react';
import {Mosaic, MosaicWindow} from 'react-mosaic-component';

const App = (props) => {

  const ELEMENT_MAP  = {
    a: <div>Left Window</div>,
    b: <div>Top Right Window</div>,
    c: <div>Bottom Right Window</div>,
  };

  return (
      <div id="app">
        <DndProvider backend={HTML5Backend} >
          <Mosaic
            renderTile={(id) => ELEMENT_MAP[id]}
            initialValue={{
              direction: 'row',
              first: 'a',
              second: {
                direction: 'column',
                first: 'b',
                second: 'c',
              },
              splitPercentage: 40,
            }}
            className={'mosaic-blueprint-theme'}
          />
        </DndProvider>
      </div>
  );
}

export default App;

Actual behavior

tiled window did not show up correctly

Expected behavior

show normal tiled windows

[Kevin Verdieck]

You are missing this required styling https://github.com/nomcopter/react-mosaic#appcss