title: How to override Material UI styles using classes using Emiotion
body: <p>I am trying to override the default styles in a Mui component using the <code>classes</code> prop and passing the css into it.  So far I have been unsuccessful and I'm not sure what I have wrong.</p>
  <p>The motivation for not using <code>makeStyles</code> is to keep our files cleaner and Emotion is faster.</p>
  <p>I am able to do it successfully using <code>makeStyles</code> like this:</p>
  <pre><code>import { css } from '@emotion/react';
  import HelpIcon from '@material-ui/icons/Help';
  import { Tooltip } from '@material-ui/core';
  import ClickAwayListener from '@material-ui/core/ClickAwayListener';
  import { useState } from 'react';
  import { cbNeutral } from '../../src/theme/palette';
  import { makeStyles } from '@material-ui/core/styles';
  import PropTypes from 'prop-types';
  
  const useStyles = makeStyles(() =&gt; ({
      arrow: {
          '&amp;:before': {
              border: `1px solid ${cbNeutral[900]}`
          },
          color: cbNeutral[1000]
      },
      tooltip: {
          backgroundColor: cbNeutral[1000],
          border: `1px solid ${cbNeutral[900]}`,
          color: cbNeutral[400],
          boxShadow: '0px 8px 16px 0px rgba(14, 13, 38, 0.12)',
          maxWidth: '385px',
          fontSize: '1.125rem',
          padding: '18px 25px',
          fontWeight: 400
      },
      root: {
          fill: cbNeutral[700],
          '&amp;:hover': {
              fill: cbNeutral[400],
              cursor: 'pointer'
          }
      }
  }));
  
  const ToolTip = ({ text }) =&gt; {
      const styles = useStyles();
      const [open, setOpen] = useState(false);
  
      return (
          &lt;ClickAwayListener onClickAway={() =&gt; setOpen(false)}&gt;
              &lt;Tooltip
                  arrow
                  title={text}
                  placement=&quot;right-start&quot;
                  open={open}
                  classes={{
                      arrow: styles.arrow,
                      tooltip: styles.tooltip
                  }}
              &gt;
                  &lt;HelpIcon onClick={() =&gt; setOpen(true)} classes={{ root: styles.root }} /&gt;
              &lt;/Tooltip&gt;
          &lt;/ClickAwayListener&gt;
      );
  };
  
  export default ToolTip;
  
  ToolTip.propTypes = {
      text: PropTypes.string.isRequired
  };
  </code></pre>
  <p>I am trying to do it with Emotion like this:</p>
  <pre><code>import { css } from '@emotion/react';
  import HelpIcon from '@material-ui/icons/Help';
  import { Tooltip } from '@material-ui/core';
  import ClickAwayListener from '@material-ui/core/ClickAwayListener';
  import { useState } from 'react';
  import { cbNeutral } from '../../src/theme/palette';
  import { makeStyles } from '@material-ui/core/styles';
  import PropTypes from 'prop-types';
  
  const toolTipCss = css`
      .arrow {
          color: ${cbNeutral[1000]};
          &amp;:before {
              border: 1px solid ${cbNeutral[900]};
          }
      }
      .tooltip {
          background-color: ${cbNeutral[1000]};
          border: 1px solid ${cbNeutral[900]};
          color: cbNeutral[400];
          box-shadow: 0px 8px 16px 0px rgba(14, 13, 38, 0.12);
          max-width: 385px;
          font-size: 1.125rem;
          padding: 18px 25px;
          font-weight: 400;
      }
  
      .help-icon {
          fill: ${cbNeutral[700]};
          &amp;:hover {
              fill: ${cbNeutral[400]};
              cursor: pointer;
          }
      }
  `;
  
  const ToolTip = ({ text }) =&gt; {
      const [open, setOpen] = useState(false);
  
      return (
          &lt;div css={toolTipCss}&gt;
              &lt;ClickAwayListener onClickAway={() =&gt; setOpen(false)}&gt;
                  &lt;Tooltip
                      arrow
                      title={text}
                      placement=&quot;right-start&quot;
                      open={open}
                      classes={{
                          arrow: 'arrow',
                          tooltip: 'tooltip'
                      }}
                  &gt;
                      &lt;HelpIcon onClick={() =&gt; setOpen(true)} className=&quot;help-icon&quot; /&gt;
                  &lt;/Tooltip&gt;
              &lt;/ClickAwayListener&gt;
          &lt;/div&gt;
      );
  };
  
  export default ToolTip;
  
  ToolTip.propTypes = {
      text: PropTypes.string.isRequired
  };
  </code></pre>
  <p>In  that version where I use <code>className=&quot;help-icon&quot;</code>, it works as expected, but <code>classes={{arrow: 'arrow', tooltip: 'tooltip'}}</code> does not change the default MUI styles.</p>
  <p>I am using these versions of MUI and Emotion</p>
  <pre><code>&quot;@emotion/react&quot;: &quot;^11.4.0&quot;,
  &quot;@material-ui/core&quot;: &quot;^4.11.4&quot;,
  </code></pre>
  <p>I know we have it working like this in another app using older versions of MUI and emotion.  I don't know if something has changed in the mean time or of I just have something wrong with my syntax.  Any help would be appreciated.</p>