简体   繁体   English

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

[英]Is it possible to add CSS in a component that does not include @Type

I would like to make a table that alternating two different colours.我想做一张交替使用两种不同颜色的桌子。 How can I make the table coloured?怎么把桌子弄成彩色的?

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

You should be able to use style attribute on color.您应该能够在颜色上使用样式属性。 For example: <div style={{ width: "100%", height: "400px", color: "red"}}> If that doesn't work try putting a div around your row tag and style that because right now you are editing the entire table.例如: <div style={{ width: "100%", height: "400px", color: "red"}}>如果这不起作用,请尝试在行标记周围放置一个 div 并设置样式,因为现在您正在编辑整个表格。 Meaning your div is on the entire table.这意味着您的 div 在整个桌子上。 Put it inside the table tags on each specific row for alternating colors.将它放在每个特定行的表格标签内以交替颜色。 Give the different div styles different colors.给不同的 div 样式赋予不同的颜色。 So instead of this: <div style={{ width: "100%", height: "400px" }}><StickyTable> Do this <StickyTable><div style={{ width: "100%", height: "400px", color:"red"}}>所以不是这样: <div style={{ width: "100%", height: "400px" }}><StickyTable><StickyTable><div style={{ width: "100%", height: "400px", color:"red"}}>

I hope it works:)我希望它有效:)

If sticky table internally uses the html table element in its jsx, you could use the even and odd css rules to apply colors to the table cells.如果粘性表内部在其 jsx 中使用 html table 元素,则可以使用偶数和奇数 css 规则将颜色应用于表格单元格。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM