Question

如何将样式应用于表Component

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

没有创建一个新的单独的css文件作出反应？我可以导入'./table.css'并在table.css中我有这个

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

但如何在没有.css文件的情况下执行此操作？要么我想将样式内联应用于每个DOM标签，如

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

Answer 1

您需要更喜欢内联css。

替代方案有四种方法可以在这里查看

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

Answer 2

你能试试吗？

class App extends Component {
render() {
    return (
      <table style={tableStyle}>
        <thead>
          <tr>
            <th style={tableStyle}>name</th>
            <th style={tableStyle}>type</th>
            <th style={tableStyle}>value</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style={tableStyle}>abc</td>
            <td style={tableStyle}>water</td>
            <td style={tableStyle}>true</td>
          </tr>
          <tr>
            <td style={tableStyle}>def</td>
            <td style={tableStyle}>fire</td>
            <td style={tableStyle}>false</td>
          </tr>
        </tbody>
      </table>
    )
  }
  const tableStyle =  {
    border: 1
};

Answer 3

您可以使用styled-component。详细文档如下：https://www.styled-components.com/docs/basics 您可以参考下面的内容，您可以在TableFrame变量

旁边编写传统的css行

import styled from 'styled-components';
const TableFrame = styled.table`
  border: 1px;
  margin: 1em;
  th {
    font-size: 1.5em;
  }
`;
class App extends Component {
  render() {
    return (
      <TableFrame>
        <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>
      </TableFrame>
    )
  }

没有新文件的反应组件的内联css

3 个答案: