CODEWITHSUNDEEP
cssreactjstypescript
user2006734
user2006734

Reputation: 325

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

Upvotes: 0

Views: 53

Answers (2)

Ajay Ullal
Ajay Ullal

Reputation: 378

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.

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

Upvotes: 0

Ronav
Ronav

Reputation: 89

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. Meaning your div is on the entire table. Put it inside the table tags on each specific row for alternating colors. Give the different div styles different colors. So instead of this: <div style={{ width: "100%", height: "400px" }}><StickyTable> Do this <StickyTable><div style={{ width: "100%", height: "400px", color:"red"}}>

I hope it works:)

Upvotes: 2

Related Questions