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

Question

我想做一张交替使用两种不同颜色的桌子。 怎么把桌子弄成彩色的？

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

Answer 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"}}>

我希望它有效:)

Answer 2

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

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