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

使用CSS，特别是在SPA应用程序中，可能会成为一种维护问题。所以我喜欢将我的风格融入这个组件的想法，其他人都不会继承它。如果不写一堆重复的代码，我怎么能这样做呢？

Answer 1

我不完全确定我理解你在寻找什么，但你想要一个更好的方法在一个没有外部依赖的文件中使用css和markup吗？

如果是这样，这可能有效：

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>

Answer 2

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

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

/*CSS file*/

table.myAwesomeTable {
  ...code
}

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

</table>

Answer 3

在全局theme.js中定义样式

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

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

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

如何在反应

3 个答案: