title: How to apply a styled component style to a non-className property?
body: <p>I am using <code>@mui/material</code> and a third-party component that has two properties: <code>className</code> and <code>wrapperClassName</code>.  Setting the <code>className</code> prop is trivial.</p>
  <pre class="lang-js prettyprint-override"><code>import styled from '@mui/material';
  import { Checkbox as _Checkbox } from 'my-checkbox-component';
  
  const Checkbox = styled(_Checkbox)`
    // my styles here
  `;
  </code></pre>
  <p>I want to know how to create a style for <code>wrapperClassName</code>.  I've tried using <code>css</code> to generate it.</p>
  <pre class="lang-js prettyprint-override"><code>// @jsx
  import styled from '@mui/material';
  import { css } from '@emotion/react';
  import { Checkbox as _Checkbox } from 'my-checkbox-component';
  
  const Checkbox = styled(props =&gt; {
    const wrapperClassName = css`
      // my wrapper styles here
    `.name;
  
    return &lt;_Checkbox {...props} wrapperClassName={wrapperClassName} /&gt;;
  })`
    // my styles here
  `;
  </code></pre>
  <p>This gets the name, but doesn't add the <code>&lt;style&gt;</code> element that contains the rule.</p>
  <p>I could do something ugly like:</p>
  <pre class="lang-js prettyprint-override"><code>import styled from '@mui/material';
  import { Checkbox as _Checkbox } from 'my-checkbox-component';
  
  const Checkbox = styled(({ className: wrapperClass, ...props }) =&gt; {
    const InnerCheckbox = styled(_Checkbox)`
      // my styles here
    `;
  
    return &lt;InnerCheckbox {...props} wrapperClassName={wrapperClass} /&gt;;
  })`
    // my wrapper styles here
  `;
  </code></pre>
  <p>That just seems all kinds of nasty.</p>
  <p>I also tried using <code>&lt;style jsx&gt;{`/* my styles */`}&lt;/style&gt;</code>, but TypeScript did not enjoy that.</p>