How do you style a component to be under another component?

0

Issue

I’m setting up a small webapp using React and Material-UI, and I can’t figure out how to make my drawer component fit under my app bar. Using the react developer tools I can see in the console that my components are picking up the classNames, but no matter what I do my styles aren’t being applied to them. Currently, the drawer is clipping through the app bar at the top of the screen, taking up the entire height of the page instead of fitting under the app bar. What do I need to change in order to make my “Sidebar” component fit under my “Navbar” component? One of the reasons why I created these two as separate components is because I’m planning on adding more functionality to them later. Thank you.

I’ve been following the “clipped under the app bar” component demo at https://material-ui.com/components/drawers/ and I’ve also referenced Material UI Drawer won't move under Appbar

Here’s a snippet of my code

My main app

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Navbar from './Navbar';
import Sidebar from './Sidebar';

const useStyles = makeStyles(theme => ({
  App: {
    display: 'flex',
  },
  navbar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: 240,
    flexShrink: 0,
  },
  toolbar: theme.mixins.toolbar,
}));

function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <CssBaseline/>
      <Navbar position="fixed" className={classes.navbar}></Navbar>
      <Sidebar className={classes.drawer}></Sidebar>
    </div>
  );
}

export default App;

My Navbar component

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

function Navbar() {
    return (
        <AppBar positon="static">
            <Toolbar>
                <h2>Earthquake Mapper</h2>
            </Toolbar>
        </AppBar>
    );
}

export default Navbar;

My Sidebar component

import React from 'react';
import Drawer from '@material-ui/core/Drawer';

function Sidebar() {

    return (
        <Drawer variant="permanent">
            <div>   
                <ul>
                    <li>This</li>
                    <li>Will</li>
                    <li>Be</li>
                    <li>Where</li>
                    <li>Our</li>
                    <li>Data</li>
                    <li>Go</li>
                </ul>
            </div>
        </Drawer>
    );
}

export default Sidebar;

Solution

First, set the AppBar position as “fixed”.

The way that Material-UI solves this is by adding an empty div with equal height to the Toolbar (which you put as the first child inside the AppBar component so your header min-height is equal to the Toolbar height) as the first child of the Drawer component.

This height is 64px by default, but you should get this value from theme.mixins.toolbar. You can see this in action in this tutorial.

So you’ll end up doing something like this:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';

const useStyles = makeStyles(theme => ({
    toolbar: theme.mixins.toolbar,
}));

function Sidebar() {
    const classes = useStyles();

    return (
        <Drawer variant="permanent">
            <div className={classes.toolbar} />
            <div>   
                <ul>
                    <li>This</li>
                    <li>Will</li>
                    <li>Be</li>
                    <li>Where</li>
                    <li>Our</li>
                    <li>Data</li>
                    <li>Go</li>
                </ul>
            </div>
        </Drawer>
    );
}

export default Sidebar;

Check out themes for more information on how to use theme providers and custom
theme configuration.

Answered By – Emre Eran

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More