How to resize table component in react semantic ui?

Question

How can I modify the size of table cell in react semantic ui ? I am using functional component named as updatesPage but the CSS is not working why so ?

code:

        import { Icon, Label, Menu, Table } from 'semantic-ui-react';

        const UpdatesPage = () => (
            <Table celled>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>Header</Table.HeaderCell>
                  <Table.HeaderCell>Header</Table.HeaderCell>
                  <Table.HeaderCell>Header</Table.HeaderCell>
                </Table.Row>
              </Table.Header>

              <Table.Body>
                <Table.Row>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                </Table.Row>
              </Table.Body>
            </Table>
        )

    export default UpdatesPage;

CSS :

.ui.table thead th {
    width: 30px;
}

.ui.table tbody td {
    width: 30px;
}

CSS is not working why so ? Am I selecting the wrong css selectors see screenshot.

Answer 1

Semantic UI React accepts a className parameter on the table, header, row, and cell. Using the following code and a style import you can change the overall look and feel of the table. You can see a preview here.

Table.js

import "./style.css";
const UpdatesPage = () => (
      <Table celled>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Header</Table.HeaderCell>
            <Table.HeaderCell>Header</Table.HeaderCell>
            <Table.HeaderCell>Header</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell className="blue-with-padding">Cell</Table.Cell>
            <Table.Cell className="yellow-with-large-padding">Cell</Table.Cell>
            <Table.Cell>Cell</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Cell</Table.Cell>
            <Table.Cell>Cell</Table.Cell>
            <Table.Cell>Cell</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Cell</Table.Cell>
            <Table.Cell>Cell</Table.Cell>
            <Table.Cell className="four-hundred-width">Cell</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    );

style.css

   .blue-with-padding {
      padding: 5px !important;
      background: blue;
    }
    .yellow-with-large-padding {
      padding: 70px !important;
      background: yellow;
    }
    .four-hundred-width {
      width: 400px;
    }