如何在反应中有效地设置表格内联样式答案

【问题标题】：How to efficiently style a table inline in react如何在反应中有效地设置表格内联样式
【发布时间】：2016-02-05 22:29:29
【问题描述】：

我可以通过以下方式为表格设置样式：

  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 {
    }

使用 CSS（尤其是在 SPA 应用程序中）可能会成为维护方面的难题。所以我喜欢将我的风格融入到这个组件中，其他人不会继承它的想法。不写一堆重复的代码怎么办？

【问题讨论】：

我从一个单独的 css 文件中使用常规 css 类在您的应用程序中是不可接受的吗？
聚合物作用域polymer-project.org/1.0/docs/devguide/styling.html
@chris 对。由于我提到的原因，我不认为这是一种可能性
不能创建保证唯一的类名？
我建议还查找有关 w3schools 上的样式表的信息。他们有一些非常简单易懂的说明和大量信息！ w3schools.com/css/css_table.asp

标签： css reactjs

【解决方案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>

【讨论】：

我认为像return ( <div> <style scoped> styles </style> <table> ... 这样的东西会更好。
@MrLister，当然。有效的选项，但这取决于我想的组件，我们对此知之甚少。我认为 OP 的主要问题是如何在 react 中声明 CSS 规则，而不是如何将它们应用于每个元素。我个人更愿意给div 一个类，然后为每个作为该div 类的子元素的html 元素设置样式。 -- 但这只是偏好。

【解决方案2】：

在你的全局 theme.js 中定义样式

 "table, th, td" :{
      border: "1px solid white" },

      "th, td" : {
        textAlign: "center"
    },

App 中的所有表格现在都将显示白色边框

【讨论】：

【解决方案3】：

您应该将所有样式放在单独的文件夹/和文件中，并保持关注点分离。您的 JavaScript 中不应有任何 CSS 声明。如果必须为您的组件设置样式，您应该使用 CSS 类而不是内联样式。

然后，您可以从一个 CSS 文件中设置所有表格的样式。

/*CSS file*/

table.myAwesomeTable {
  ...code
}

/*Markup */
<table className="myAwesomeTable">

</table>

【讨论】：

只要你使用 React，我认为内联样式没有问题。
他明确要求不要使用单独的 CSS 文件