title: How do I conditionally render part of my CSS class
body: <p>How can I make all of the css inside the following hover psuedoclass conditionally render when a variable (data) is not null? I have the following styles in my React Component (which uses Material UI makeStyles:</p>
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
        card: {
          height: '100%',
          '&amp;:hover': {
            background: theme.palette.secondary.light,
            cursor: 'pointer',
            '&amp; $hide': {
              opacity: 1,
              transition: '0.6s',
            },
          },
        },
  }));
  
  const myComponent = ({data}) =&gt; {
       const classes=useStyles({data});
       &lt;div className={classes.card}&gt;
            Hello
       &lt;/div&gt;
  }
  </code></pre>
  <p>I have tried using something along the following lines, but with all the back ticks and apostrophes it's not working at all!:</p>
  <pre><code>  card: {
      height: '100%',
      position: 'relative',
      ({ data}) =&gt; (data &amp;&amp; `'&amp;:hover': {
        background: ${theme.palette.secondary.light},
        cursor: 'pointer', 
        '&amp; $hide': {
          opacity: 1,
          transition: '0.6s',
        },
      },`),
    },
  </code></pre>
  <p>Many thanks,</p>
  <p>Katie</p>