css - 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 的特殊性。您的选择器的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。
推荐阅读
- java - 无法在 Maven 构建中写入清单文件
- python - 如何通过套接字python发送函数
- haskell - 如何将键/值对附加到在yesod的小村庄块中生成的url
- javascript - Javascript .onclick 不调用函数
- python - 如何通过 Git Bash (amazon-crawler) 安装这个 github 包
- kubernetes - 从 kubernetes pod 嗅探主机网络流量
- python - 比较 df 跨 3 列的行以找出它们是否都具有相同的字符串值并返回布尔答案?
- java - 为什么 ListView 在 Fragment Dialog 中总是为空
- c++ - C ++:如何将键和值传递给构造函数以制作地图,而无需在构造期间复制地图的值?
- ios - 从 iOS 通知 Flutter 中移除