could anyone kindly help me out with material ui style positioning

You can see it working here:

Here is the code snippet:

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import MenuIcon from '@material-ui/icons/Menu';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  button: {
    marginRight: 6,
  },
  rightIcon: {
    marginLeft: theme.spacing.unit,
  },
});

class Appbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
   }
  }

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="inherit"
            aria-label="Menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" className={classes.grow}>
            Demo
          </Typography>
          <Button
            color="inherit"
            className={classes.button}
          >
            <ShoppingCartIcon className={classes.rightIcon} />
          </Button>
        </Toolbar>
      </AppBar>
    </div>
    );
  }
}

export default withStyles(styles)(Appbar);

I gave flexGrow property to the title to let it grow, remaining space in the container is distributed equally to all children. You can learn more about it here.

This is more of a CSS question than a Material-UI question.

You should give the parent where the icon and font are contained the following 2 rules in css:

display: flex,
justify-content: space-between

If you want more information about flexbox, go to this link

I would add a class to the appbar that gives it row flex direction and add a div to help with the spacing. The final solution should look something like this:

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
 Grid, AppBar, Toolbar, Typography
 } from '@material-ui/core';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 import Badge from '@material-ui/core/Badge';
 import IconButton from '@material-ui/core/IconButton';

class Appbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
   }
  }

  render() {
    const classes = makeStyles(theme => ({
      root: {
        flexGrow: 1,
      },
      title: {
        marginRight: theme.spacing(2),
      },
      appBar: {
        display: 'flex',
      }
      spacer: {
        flexGrow: 1,
      },
      cart: {
        flexGrow:0,
      },
   }));
    return (
      <div className={classes.root}>
       <AppBar position="static" className={classes.appBar}>
          <Typography className={classes.title} variant="h6">
            THIS IS IT
          </Typography>
          <div className={classes.spacer}/>
          <IconButton className ={classes.cart} aria- 
  label="Cart">
          <Badge badgeContent={100} color="primary">
            <ShoppingCartIcon/>
          </Badge>
        </IconButton>
    </AppBar>
  </div>
    );
  }
}

export default Appbar;