Resizable Grid not rendering properly

Questions
1

I have downloaded the started template from https://github.com/framework7io/framework7-appstore-react. The only change I have made is to go to Arcade.jsx and added a resizable grid. My exact change is given below:

const Arcade = () => {
  return (
    <AppstorePage title="Arcade">
      <Block>
        <Row resizable>
          <Col resizable>Hello World</Col>
          <Col resizable>Hello Material 2</Col>
        </Row>
      </Block>
    </AppstorePage>
  );
};

When I load the page in Chrome, the div elements are appropriately rendered with the ‘resizable’ style as expected. See below for when Chrome html looks like:

<div class="block"><div class="row resizable"><div class="col resizable">Hello World<span class="resize-handler"></span></div><div class="col resizable">Hello Material 2<span class="resize-handler"></span></div><span class="resize-handler"></span></div></div>

But I think I’m missing include/import of some styles because the page is rendered without any resizable support i.e. all I see is Chrome rendering two lines. In the first line it displays “Hello World” and in the second line it displays “Hello Material 2” implying that no styles were applied.

You can easily repro this by downloading the starter project and modifying the Arcade.jsx with the code given above.

I’m a n00b so apologies if there is a simple fix that I am missing. Appreciate your help.

2

You missed to include Grid component in styles and probably in JS modules too, look for framework7 files