如何有效地在响应中内联样式表

Question

我可以通过以下方式在表中设置样式：

  var tableStyle = {
       "border": "1px solid black"
    };
    return (
      <div>
        <h1>My Awesome Table</h1>
        <table style={tableStyle}>
          <th>Awesome Header</th>

将我的样式和html耦合到一个可重用的组件中是做事的反应方式。如何有效地设计整个桌子的样式？我可以通过以下方式设置每个标题的样式：

<th style={headerStyle}>
<th style={headerStyle}>
<th style={headerStyle}>

和

<tr style={rowStyle}>
<tr style={rowStyle}>

那不是很有效。在普通的旧CSS中，我可以做

 table {
       //boom style all the things
    }
    th {

    }
    tr {
    }

特别是在SPA应用程序中使用CSS可能会引起维护麻烦。因此，我喜欢将样式粘贴到该组件中的想法，其他人都不会继承它。不编写一堆重复代码怎么办？

Answer 1

不能完全确定我了解您要查找的内容，但是您想要一种更好的方法来在一个没有外部依赖的文件中包含CSS和标记吗？

如果是这样，这可能会起作用：

return (
  <style>{`
    table{
     border:1px solid black;
    }
  `}</style>
  <div>
    <h1>My Awesome Table</h1>
    <table>
      <th>Awesome Header</th>
      ...
)

这里似乎需要使用模板文字字符串格式来支持<style>内容跨越多行。

或者：

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