Блог

Я создал компонент и 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.