Next.js 全局 CSS 正在接管 module.css

Question

我制作了一个组件和一个 module.css，因为与我项目的其他输入相比，它具有特定 CSS 风格的输入。

这就是为什么我在全局 CSS 中为组件中的所有输入设置了输入样式。

我用 module.css 制作了几个组件，到目前为止，一切正常，但对于这个特定组件，我不知道为什么，module.css 没有应用，而是它是全局 CSS.

我的组件：

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;

CSS模块：

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

在下面的屏幕截图中，您可以看到应用了全局 CSS 而不是 module.css。我错过了什么或做错了什么？

Answer 1

因为CSS specificity。 searchBar.module.css 中的选择器的特异性低于全局 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

您需要更改其中一项，例如在此处添加属性应该会有所帮助：.searchBar_searchBar__5Kgde input[type="text"]。但是您应该改为修复全局 CSS。

Next.js 全局 CSS 正在接管 module.css

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

css

css-selectors

reactjs

css-modules

react-css-modules