title: Conditionally Rendering Material UI Styles?
body: <p>Currently building an application for a school project. I am looking to use an inline conditional render (i.e. condition ? expression1 : expression2) to determine what type of user is currently signed in (a doctor or a pharmacist), which is supposed to render the navbar a different color... a simplified version looks something like this...</p>
  
  <pre><code>const useStyles = makeStyles({
    docNav: {
      background: 'linear-gradient(45deg, #F00000 30%, #DC281E 90%)',
    },
  
    pharmaNav: {
      background: 'linear-gradient(45deg, #0575E6 30%, #021B79 90%)',
    }
  });
  
  const Navbar = ({ isPharmacist }) =&gt; {
    const classes = useStyles();
  
      return (
        &lt;AppBar className={classes.pharmaNav} position="static"&gt;
          &lt;Toolbar variant="regular"&gt;
            &lt;IconButton&gt;
              &lt;GitHubIcon /&gt;
            &lt;/IconButton&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
      ); //and then I also have a corresponding check statement with a similar return if the person signed in is a doctor...
  </code></pre>
  
  <p>So, to conditionally render the AppBar, depending on if isPharmacist is true or not, what may be a simple way to do this??? I tried <code>&lt;AppBar className={isPharmacist ? classes.pharmaNav : classes.docNav }&gt;</code>, but that didn't seem to work. Any help would be very appreciated.</p>