Next.js 全局 CSS 接管了 module.css

问题描述

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

解决方法

这是因为CSS specificity。 {{- range .Values.componentTests }} 中的选择器的特异性低于全局 CSS 中的选择器。

searchBar.module.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 。但是您可能应该修复您的全局 CSS。