How to use css modules (react semantic ui) in create react app?

Question

I am using react semantic ui and I want to add margin left and margin top for Table component (i.e 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 i.e javascript is working but the CSS is not working why so ? See screenshot: https://i.sstatic.net/zQJ0b.jpg I am not able to see any margin top, left for table.

Ryan Cogswell · Accepted Answer · 2018-11-16 05:12:37Z

2

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

edited Nov 16, 2018 at 5:12

answered Nov 16, 2018 at 5:05

Ryan Cogswell

81.8k10 gold badges242 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fun joker Over a year ago

Do I need to make any changes in webpack.config file in node modules -> react scripts ?

Ryan Cogswell Over a year ago

No, CRA using the file naming convention of *.module.css to indicate use of css modules, otherwise it interprets it as a regular css file.

fun joker Over a year ago

I saw your updated answer and I am doing same thing but it is not working any idea how to reduce size of table and align it ? margin left and margin top not working

kumar k · Accepted Answer · 2018-11-16 06:54:31Z

0

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

edited Nov 16, 2018 at 6:54

answered Nov 16, 2018 at 5:13

kumar k

4762 silver badges9 bronze badges

5 Comments

fun joker Over a year ago

I am using CSS modules in create react app.

fun joker Over a year ago

it is not working. Note: I am using react semantic ui and Table component has a className prop

fun joker Over a year ago

No it doesn't work. Note: I am using react semantic ui -> react.semantic-ui.com/collections/table/#types-pagination

kumar k Over a year ago

Please take screenshot again and upload it here.

kumar k Over a year ago

While saw this screenshot imgur.com/a/e3bsCvf I have noticed that css set but priority is taken by semantic UI it's not getting updated. So I have edited the answer please check it. You can also follow steps answered by @Ryan C just add !important in css

Collectives™ on Stack Overflow

How to use css modules (react semantic ui) in create react app?

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related