Search code examples
javascriptcss-loader

If css module name equals react component name then css module not work

File structure:

src/
--- DatePicker/
--- --- index.js
--- --- style.module.scss

style.module.scss

.DatePicker {
  background: black;

  input {
    background: red;
  }
}

index.js

import React from 'react';
import CSS from "./style.module.scss";

export const DatePicker =(...props) => {
    return (
        <div className={CSS.DatePicker }>
                <input ref={inputRef}
                       type="text"
                       value={formattedDate}/>
        </div>
    )
};

Build without errors. Class name not added to DOM.

If rename css module to "asdasd" everything work

Solution

  • Rename "DatePicker" to "datePicker". CSS Modules not support Capitalize.