Drawer Component css style issue ?

[itjayaprakash]

I tried to import drawer component but is not reflecting css in React App
https://github.com/material-components/material-components-web-react/tree/master/packages/drawer

app.scss file i added css code it's reflecting..

.drawer-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

.drawer-app-content {
  flex: auto;
  overflow: auto;
}

but this style css not working.

import '@material/react-drawer/index.scss';
import "@material/react-drawer/dist/drawer.css";

Step 1
i have created React App. using given below cmd

npx create-react-app my-app
cd my-app
npm start

Step 2
Git command propmt

SET SASS_PATH=.\node_modules

after that

npm install node-sass

Step 3
git command propmt

npm install @material/react-drawer
npm install @material/react-list
npm install @material/react-material-icon
npm install @material/react-top-app-bar

Step 4
App.js file

import React, {Component} from 'react';
import TopAppBar, {TopAppBarFixedAdjust} from '@material/react-top-app-bar';
import Drawer, {DrawerAppContent, DrawerContent, DrawerHeader, DrawerTitle} from '@material/react-drawer';
import MaterialIcon from '@material/react-material-icon';
import List, {ListItem, ListItemGraphic, ListItemText} from '@material/react-list';

// includes imports for drawer, list, material icon and top app bar styles
import './App.scss';
import '@material/react-drawer/index.scss';
import "@material/react-drawer/dist/drawer.css";

export default class App extends Component {
  state = {selectedIndex: 0};

  render() {
    return (
      
      <div className='drawer-container'>
      <TopAppBar title='Inbox'/>

      <TopAppBarFixedAdjust>
        <Drawer>
          <DrawerHeader>
            <DrawerTitle tag='h2'>
              jane.smith@gmail.com
            </DrawerTitle>
          </DrawerHeader>

          <DrawerContent>
            <List singleSelection selectedIndex={this.state.selectedIndex}>
              <ListItem>
                <ListItemGraphic graphic={<MaterialIcon icon='folder'/>} />
                <ListItemText primaryText='Mail' />
              </ListItem>
            </List>
          </DrawerContent>
        </Drawer>

        <DrawerAppContent className='drawer-app-content'>
          Your inbox content
        </DrawerAppContent>
      </TopAppBarFixedAdjust>
    </div>

    );
  }
}

Output is like.

[moog16]

A few things:

1. You don't need to import both:

import "@material/react-drawer/dist/drawer.css";

You only need the scss file in your case.

2. You must also import the top-app-bar, list, and material-icon scss files

import '@material/react-top-app-bar/index.scss'
import '@material/react-list/index.scss'
import '@material/react-material-icon/index.scss'

3. You are missing the material-icon import in your public/index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">```

[itjayaprakash]

Thanks for your reply...
i tried it's now working fine

we need to add those thing.

import "@material/react-drawer/dist/drawer.css";
import "@material/react-list/dist/list.css";
import '@material/react-top-app-bar/dist/top-app-bar.css';
import '@material/react-material-icon/dist/material-icon.css';

but Scss is not working

i added this import '@material/react-drawer/index.scss';
after compile. getting this

Failed to compile. ./node_modules/@material/react-drawer/index.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./node_modules/@material/react-drawer/index.scss) undefined ^ File to import not found or unreadable: @material/drawer/mdc-drawer. in D:\Jayaprakash\ReactMaterial\my-app\node_modules\@material\react-drawer\index.scss (line 23, column 1)

Thanks & regards
J.Jayaprakash

[moog16]

I created a CRA this morning and produced this.

Please see zipped project.
Instructions:

1. yarn
2. yarn start
3. localhost:3000

app.zip

[itjayaprakash]

Hi Matt Goo,

I followed your instruction since gettings scss file un readble error anyway i resolved this issue now i forgot to set environment path in cmd SETX SASS_PATH .\node_modules. your app also now running.

Thanks.

[ZeJ0hn]

Hello @moog16,

Thank you for your example.
I need to add this in the css file :

.top-app-bar-fix-adjust {
    display: flex;
    width: 100%;    // <--- I need this
}

Else my main component didn't fill the whole space.
Is it ok for you ?

Note : the documentation for the drawer is not up-to-date. The .top-app-bar-fix-adjust is not defined and the main component doesn't render correctly

[moog16]

@ZeJ0hn are you saying the example on the drawer readme is not correct?

Also I'm not sure what you mean about the NOTE. The class is actually .top-app-bar--fixed-adjust

[ZeJ0hn]

@moog16 My explanation is not very clear. Sorry for that.

In the drawer README, if you try to use the example "Dismissible or Permanent drawer below top app bar", it doesn't work. The text "Your inbox content" doesn't appear.
So, instead to have this css :

.drawer-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

.drawer-app-content {
  flex: auto;
  overflow: auto;
}

I had to use this one.

    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
}

.drawer-app-content {
    flex: auto;
    overflow: auto;
}

.top-app-bar-fix-adjust {
    display: flex;
    width: 100%;
}

and add the class .top-app-bar-fix-adjust to the

[moog16]

ah I see...I remember having to do that as well. Do you mind opening a PR to update the readme?

[ZeJ0hn]

No PR. I can do that if you want

[moog16]

Ya that would be great! Otherwise I might reopen this issue to fix them later.

[ZeJ0hn]

Hello,

I create the PR #666
I also fix another example with the PR #665 (but I don't know with the build failed)

Have fun

[moog16]

thank you!