如何在不创建新文件的情况下为React Table组件应用内联CSS？

没问题！在React里给表格添加内联样式完全不需要额外创建CSS文件，下面我给你两种实用的实现方式：

方式一：直接在元素上定义内联样式对象 #

React的内联样式是通过style属性传递JavaScript对象来实现的，注意CSS属性名要改成驼峰命名（比如backgroundColor代替background-color）。你可以直接给表格、表头、单元格等元素单独设置样式：

class App extends Component {
  render() {
    return (
      <table style={{ borderCollapse: 'collapse', width: '100%', border: '1px solid #ddd' }}>
        <thead>
          <tr>
            <th style={{ padding: '8px', textAlign: 'left', backgroundColor: '#f2f2f2', borderBottom: '1px solid #ddd' }}>name</th>
            <th style={{ padding: '8px', textAlign: 'left', backgroundColor: '#f2f2f2', borderBottom: '1px solid #ddd' }}>type</th>
            <th style={{ padding: '8px', textAlign: 'left', backgroundColor: '#f2f2f2', borderBottom: '1px solid #ddd' }}>value</th>
          </tr>
        </thead>
        <tbody>
          <tr style={{ borderBottom: '1px solid #ddd' }}>
            <td style={{ padding: '8px' }}>abc</td>
            <td style={{ padding: '8px' }}>water</td>
            <td style={{ padding: '8px' }}>true</td>
          </tr>
          <tr style={{ borderBottom: '1px solid #ddd' }}>
            <td style={{ padding: '8px' }}>def</td>
            <td style={{ padding: '8px' }}>fire</td>
            <td style={{ padding: '8px' }}>false</td>
          </tr>
        </tbody>
      </table>
    )
  }
}

方式二：提取样式对象到组件内部（更整洁易维护） #

如果样式重复较多，你可以把样式对象提前定义在组件内部，然后通过style属性引用，这样代码更干净，也方便后续修改：

class App extends Component {
  // 定义组件内部的样式对象
  tableStyles = {
    borderCollapse: 'collapse',
    width: '100%',
    border: '1px solid #ddd'
  };

  headerCellStyles = {
    padding: '8px',
    textAlign: 'left',
    backgroundColor: '#f2f2f2',
    borderBottom: '1px solid #ddd'
  };

  bodyCellStyles = {
    padding: '8px'
  };

  rowStyles = {
    borderBottom: '1px solid #ddd'
  };

  render() {
    return (
      <table style={this.tableStyles}>
        <thead>
          <tr>
            <th style={this.headerCellStyles}>name</th>
            <th style={this.headerCellStyles}>type</th>
            <th style={this.headerCellStyles}>value</th>
          </tr>
        </thead>
        <tbody>
          <tr style={this.rowStyles}>
            <td style={this.bodyCellStyles}>abc</td>
            <td style={this.bodyCellStyles}>water</td>
            <td style={this.bodyCellStyles}>true</td>
          </tr>
          <tr style={this.rowStyles}>
            <td style={this.bodyCellStyles}>def</td>
            <td style={this.bodyCellStyles}>fire</td>
            <td style={this.bodyCellStyles}>false</td>
          </tr>
        </tbody>
      </table>
    )
  }
}

小提示 #

• 所有CSS属性名必须用驼峰写法（比如fontSize而不是font-size）
• 如果属性值是数字（比如padding: 8），可以省略引号；如果是字符串（比如backgroundColor: '#f2f2f2'），需要加引号
• 内联样式的优先级会高于外部CSS，适合快速给单个组件或元素设置样式

内容的提问来源于stack exchange，提问作者Sharon Chai