Файл CSS применяется к другому компоненту реакции даже без импорта
Здравствуйте, я использую 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>
)
}
Любая причина и решение для этого?
Ответы 2
Причина в том, что вы используете один и тот же класс в обоих ваших компонентах.
Выполнение import 'Home.css' не инкапсулирует .css только для этого компонента, все .css объединяются вместе, поэтому стили переписываются где-то в конце строки.
Для каждого из компонентов вы можете указать уникальный className поверх вашего компонента и использовать этот класс для стилизации только этого компонента.
.home-container .header { ... }
Вы также можете сделать одну глобальную часть .css, чтобы поместить стили, которые вы хотите использовать во всем приложении.
При импорте файла css, как вы сделали, он будет внедрен в проект, а не только в компонент, из которого вы его импортируете.
То, что вы ищете, это css-модули ( добавление css-модулей с помощью приложения create-react-app)
import React from 'react';
import styles from 'Home.css';
const Home = () => {
return (
<div className = {styles.example}>
Hi
</div>
)
}
да. потому что css-module переименует имя класса во что-то вроде example_dfd23, чтобы оно было уникальным в браузере.
Что делать, если я хочу объединить другой класс с этим модулем css. Скажем, класс начальной загрузки. Могу ли я просто использовать строки шаблона, такие как className = {row ${styles.example}}
@IbrahimFarooq есть несколько способов сделать это. один то, что вы предложили. другой — className = {["row", styles.example].join(" ")}, а для этого есть вспомогательный пакет под названием classnames
@Philip Я полагаю, что даже если стили модулей css применяются к элементам html, например, - h1 { color: red } , все равно будут глобальными и применяться ко всем компонентам? Это правда?
Могу ли я использовать одно и то же имя класса во всех файлах с модулем css?