Блог

Главная - Вопросы по программированию - Файл CSS применяется к другому компоненту react даже без импорта

Файл CSS применяется к другому компоненту react даже без импорта

#css #reactjs

#css #reactjs

Вопрос:

Здравствуйте, я использую React для создания веб-сайта, и я хочу использовать.Файлы CSS для моего CSS, и я использую import ‘./example.css’ в моем компонентном файле. Пример:

 import React from 'react';
import 'Home.css';
const Home = () => {
return (
<div className="example">
          Hi
</div>
)
}

и если я создаю другую страницу, но не импортирую этот файл CSS, я получаю стили на моей другой странице
другая страница:

 import React from 'react';

const About= () => {
return (
<div className="example">
          Hi
</div>
)
}

Есть ли причина и решение для этого?

Ответ №1:

При импорте файла css, как вы это сделали, он будет введен в проект, а не только в компонент, из которого вы его импортируете.

То, что вы ищете, это css-модули (добавление css-модулей с помощью create-react-app)

 import React from 'react';
import styles from 'Home.css';

const Home = () => {
  return (
    <div className={styles.example}>
          Hi
    </div>
  )
}

Комментарии:

1. Могу ли я использовать одно и то же имя класса во всех файлах с модулем css?

2. да. потому что css-module переименует имя класса во что-то вроде example_dfd23 , чтобы оно было уникальным в браузере.

3. Что, если я хочу объединить другой класс с этим модулем css. Допустим, класс начальной загрузки. Я бы просто использовал строки шаблона, такие как className={row ${styles.example}}

4. @IbrahimFarooq есть несколько способов сделать это. один из них — это то, что вы предложили. другой className={["row", styles.example].join(" ")} , а затем есть вспомогательный пакет для этого, называемый classnames

5. @Philip Я полагаю, что даже с модулями css стили, применяемые к элементам html, например, для h1 { color: red} , все равно будут глобальными и будут применяться ко всем компонентам? Это правда?

Ответ №2:

Причина в том, что вы используете один и тот же класс в обоих ваших компонентах. Выполнение import 'Home.css' не инкапсулирует .css только для этого компонента, все .css они объединяются вместе, поэтому в конечном итоге стили перезаписываются где-то в конце строки.

Для каждого из компонентов вы можете указать уникальный className поверх вашего компонента и использовать этот класс для стилизации только этого компонента. .home-container .header { ... } Вы также можете создать одну глобальную .css часть, чтобы поместить стили, которые вы хотите продолжать использовать во всем приложении.