css - How to efficiently style a table inline in react -

i can style table in react via:

  var tablestyle = {        "border": "1px solid black"     };     return (       <div>         <h1>my awesome table</h1>         <table style={tablestyle}>           <th>awesome header</th> 

coupling style , html reusable component react way of doing things. how can style whole table? style each header via:

<th style={headerstyle}>
<th style={headerstyle}>
<th style={headerstyle}>

and

<tr style={rowstyle}>
<tr style={rowstyle}>

that's not efficient. in plain old css can

 table {        //boom style things     }     th {      }     tr {     } 

using css, particularly in spa application can become maintenance headache. idea of sticking style component nobody else inherit it. how can without writing bunch of repetitive code?

not entirely sure understand you're looking for, want better way of having css , markup in 1 file no external dependencies?

if so, might work:

return (   <style>{`     table{      border:1px solid black;     }   `}</style>   <div>     <h1>my awesome table</h1>     <table>       <th>awesome header</th>       ... ) 

using template literal string formatting seems necessary here support <style> contents span across multiple lines.

alternatively:

<style>{"table{border:1px solid black;}"}</style>