title: How to efficiently style a table inline in react
body: <p>I can style a table in react via:</p>
  
  <pre><code>  var tableStyle = {
         "border": "1px solid black"
      };
      return (
        &lt;div&gt;
          &lt;h1&gt;My Awesome Table&lt;/h1&gt;
          &lt;table style={tableStyle}&gt;
            &lt;th&gt;Awesome Header&lt;/th&gt;
  </code></pre>
  
  <p>Coupling my style and html into a reusable component is the react way of doing things.  How can I effectively style my whole table?  I could style each header via:</p>
  
  <p><code>&lt;th style={headerStyle}&gt;</code><br />
  <code>&lt;th style={headerStyle}&gt;</code><br />
  <code>&lt;th style={headerStyle}&gt;</code><br /></p>
  
  <p>and</p>
  
  <p><code>&lt;tr style={rowStyle}&gt;</code><br />
  <code>&lt;tr style={rowStyle}&gt;</code></p>
  
  <p>That's not very efficient.  In plain old CSS I can just do </p>
  
  <pre><code> table {
         //boom style all the things
      }
      th {
  
      }
      tr {
      }
  </code></pre>
  
  <p>Using CSS, particularly in a SPA application can become a maintenance headache.  So I like the idea of sticking my style into this component where nobody else will inherit it.  How can I do it without writing a bunch of repetitive code?</p>