javascript - 没有新文件的 react 组件的内联 css

Question

如何将样式应用到我的表格组件

class App extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>type</th>
            <th>value</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>abc</td>
            <td>water</td>
            <td>true</td>
          </tr>
          <tr>
            <td>def</td>
            <td>fire</td>
            <td>false</td>
          </tr>
        </tbody>
      </table>
    )
  }

没有在 react 中创建一个新的单独的 css 文件？我可以做 import './table.css' 并且在 table.css 里面我有这个

table, th, td {
  border: 1px;
}

但是如果没有 .css 文件，我该怎么做呢？要么我想将内联样式应用于每个 DOM 标记，例如

style={{'border':'1px solid'}}

Answer 1

您需要更喜欢内联 CSS。

这里有 4 种方法可供选择

https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822