是否可以在不包含 @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}