Next.js the global CSS is taking it over the module.css

Question

I made a component and a module.css because it has got inputs with specific CSS style compared to the rest of the inputs of my projects.

This is why I have inputs style in the global CSS for all the inputs expect these in my component.

I have made several components with module.css and so far, it is all working fine but for this specific component, I don't know why, the module.css is not applying, instead it is the global CSS.

My component:

import React, { useState } from "react";
import style from "./searchBar.module.css";

const SearchBar = () => {
  const [city, setCity] = useState("");
  return (
    <form className={style.searchBar}>
      <div>
        <label>Ville</label>
        <input
          type="text"
          name="city"
          placeholder="Où veux-tu jouer?"
          value={city}
          onChange={(e) => {
            setCity(e.target.value);
          }}
        />
      </div>
      <div>
        <label>Sport</label>
        <input />
      </div>
      <div>
        <label>Nom</label>
        <input />
      </div>
      <div>
        <label>Type</label>
        <select></select>
      </div>
      <button>Rechercher</button>
    </form>
  );
};

export default SearchBar;

The CSS module:

.searchBar {
  margin: 0 auto;
  border: 1px solid var(--grey);
  width: 74.37%; /*  937px;  */
  height: 14.91%; /*  72px; */
  background-color: #fff;
  border-radius: 42px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.searchBar input {
  width: 100px;
  height: 50px;
}

On the following screenshot you can see that the global CSS has been applied instead of the module.css. What am I missing or doing wrong?

while importing your component and global css, make sure you import global css before your component, then your component's module css will not override — Amit kumar
– Amit kumar, Commented Jan 10, 2024 at 6:54

Zsolt Meszaros · Accepted Answer · 2021-01-14 14:54:37Z

1

It's because of CSS specificity. The selector in your searchBar.module.css has a lower specificity than the one in your global CSS.

// 0 ids, 2 attributes, 1 element
// specificity is 21
input:not([type="checkbox"]):not([type="radio"])

/// 0 ids, 1 class name, 1 element
// specificity is 11
.searchBar_searchBar__5Kgde input

You need to change one of them, e.g. adding an attribute here should help: .searchBar_searchBar__5Kgde input[type="text"]. But you should probably fix your global CSS instead.

answered Jan 14, 2021 at 14:54

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

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

1 Comment

Florie Anstett Over a year ago

Oh I see. I thought that the module.css would overwrite the global css no matter what. Thank you so much for clarifying this point.

Collectives™ on Stack Overflow

Next.js the global CSS is taking it over the module.css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related