是否可以在不包含 @Type 的组件中添加 CSS答案

【问题标题】：Is it possible to add CSS in a component that does not include @Type是否可以在不包含 @Type 的组件中添加 CSS
【发布时间】：2020-04-02 19:24:53
【问题描述】：

我想制作一张交替使用两种不同颜色的桌子。我怎样才能让桌子上色？

const StickyTable = require("react-sticky-table").StickyTable;
const Row = require("react-sticky-table").Row;
const Cell = require("react-sticky-table").Cell;

export const BasicExample = () => {
  return (
    <React.Fragment>
      <Paper>
        <div style={{ width: "100%", height: "400px" }}>
          <StickyTable>
            <Row>
              <Cell>Header 1</Cell>
              <Cell>Header 2</Cell>
            </Row>
            <Row>
              <Cell>Cell 1</Cell>
              <Cell>Cell 2</Cell>
            </Row>
          </StickyTable>
        </div>
      </Paper>
    </React.Fragment>
  );
};

【问题讨论】：

标签： css reactjs typescript

【解决方案1】：

您应该能够在颜色上使用样式属性。例如： <div style={{ width: "100%", height: "400px", color: "red"}}> 如果这不起作用，请尝试在行标签和样式周围放置一个 div，因为现在您正在编辑整个表格。这意味着您的 div 在整个桌子上。将其放在每个特定行的表格标签内以交替颜色。为不同的 div 样式赋予不同的颜色。所以代替这个：<div style={{ width: "100%", height: "400px" }}><StickyTable> 这样做<StickyTable><div style={{ width: "100%", height: "400px", color:"red"}}>

我希望它有效:)

【讨论】：

【解决方案2】：

如果粘性表格内部在其 jsx 中使用 html 表格元素，您可以使用偶数和奇数 css 规则将颜色应用于表格单元格。

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

【讨论】：

感谢您的回答。是否可以添加Module CSS或放入div Tag？