如何在Create React App中使用CSS模块（React语义ui）？

Question

I am using react semantic ui and I want to add margin left and margin top for Table component (ie align it in center) I also want to reduce the cell size inside Table but my css is not working why so ? Do I need to add any css loader or scss loader ? I am not able to understand why is my CSS code not working ?

Note: Table component has a prop called className and I want to make use of className prop and add custom styles. Link: https://react.semantic-ui.com/collections/table/#types-pagination

updatePage.js:

    import React, { Component } from 'react';
import { Icon, Label, Menu, Table } from 'semantic-ui-react';
import faker from 'faker';
import s from './updatesPage.css';

const UpdatesPage = () => (
    <Table celled className={s.updateForm}>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>URN number</Table.HeaderCell>
          <Table.HeaderCell>Parish</Table.HeaderCell>
          <Table.HeaderCell>Last Updated</Table.HeaderCell>
          <Table.HeaderCell>Notes</Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        <Table.Row>
          <Table.Cell>{faker.name.findName()}</Table.Cell>
          <Table.Cell>{faker.random.number()}</Table.Cell>
          <Table.Cell>{faker.address.streetAddress()}</Table.Cell>
          <Table.Cell>{faker.date.weekday()}</Table.Cell>
          <Table.Cell>{faker.random.words()}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{faker.name.findName()}</Table.Cell>
          <Table.Cell>{faker.random.number()}</Table.Cell>
          <Table.Cell>{faker.address.streetAddress()}</Table.Cell>
          <Table.Cell>{faker.date.weekday()}</Table.Cell>
          <Table.Cell>{faker.random.words()}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
)

export default UpdatesPage;

updatePage.css:

.updateForm {
    margin-top: 100px;
    margin-left: 50px;
}

Above code is working ie javascript is working but the CSS is not working why so ? See screenshot: https://imgur.com/a/sBEUA6J I am not able to see any margin top, left for table.

Answer 1

In order to use CSS modules with create-react-app you need to rename your css file to updatesPage.module.css.

You can find documentation for this in the “Adding a CSS Modules Stylesheet” portion of the user guide

Answer 2

The issue with line import css. While import the css no need to give the module name for it. Just change the import line as below, it will work

import './updatesPage.css';

Also change the code for className as below

<Table celled className='updateForm'>

Like sematic ui take priority while setting the css. So you need to change the priority in css add !important .

.updateForm {
    margin-top: 100px !important;
    margin-left: 50px !important;
}