title: How can I create new global css classes on the fly in React?
body: <p>I’m using Draft.js for a project. I created a component that allows you to choose a font from a menu, then apply that font to the selected text in the Draft.js editor.</p>
  
  <p>The way I need to do this:</p>
  
  <ol>
  <li>Dynamically add a <code>@font-face</code> rule for the selected font that includes the font name and file location;</li>
  <li>Create a <em>new</em> CSS class containing the <code>font-family</code> property that uses the font name from the <code>@font-face</code> rule that was added; and</li>
  <li>Apply that new CSS class to the selection.</li>
  </ol>
  
  <p>I’ve gotten everything but #2 figured out. For #2, I’m not finding any clear methods or tools to use that allow me to create new CSS classes in the global space. I’m reading a lot about css-in-js, but everything seems bloated or overly complex.</p>
  
  <p>I’m formatting the <code>@font-face</code> rule and class like this:</p>
  
  <pre><code>const newClass = {
      '@font-face': [
          {
              fontFamily: `${font.label} ${FONT_FAMILY_PREFIX}-A`,
              src: `url(/fonts/${font.value}-TD-Space.woff)`,
              fontWeight: 'normal',
              fontStyle: 'normal',
  
          }, {
              fontFamily: `${font.label} ${FONT_FAMILY_PREFIX}-B`,
              src: `url(/fonts/${font.value}-TD.woff)`,
              fontWeight: 'normal',
              fontStyle: 'normal',
          },
      ],
      [`.${font.value}`]: {
          fontFamily: `${font.label} ${FONT_FAMILY_PREFIX}-A, ${font.label} ${FONT_FAMILY_PREFIX}-B`,
      },
  })
  </code></pre>
  
  <p>But I’m just not sure <em>where</em> to put it so it’s accessible across the app.</p>
  
  <p>Does this require the help of some package or is there a simpler way I can manage it without?</p>