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

Posted 2023-03-06

【中文标题】Next.js 全局 CSS 正在接管 module.css

【英文标题】：Next.js the global CSS is taking it over the module.css

【发布时间】：2021-04-19 14:08:14

【问题描述】：

我制作了一个组件和一个 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。我错过了什么或做错了什么？

【参考方案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。

【讨论】：

哦，我明白了。我认为 module.css 无论如何都会覆盖全局 css。非常感谢您澄清这一点。