Реакция маршрута вызывает изменение класса

Question

Я хочу использовать этот же компонент на другой странице. Один из них на домашней странице, а другой на странице категории.

----- HEADER className = "популярный заголовок" -----
----- ТЕЛО ---- -----------------

Домашняя страница css папка

.popular-header {
 display: flex;
 @blabla
}

Но проблема в том, что заголовок не должен отображаться время, а также я буду менять некоторые цвета кнопок в теле. Итак, я попробовал изменить популярный заголовок css в своей локальной папке.

CategoryPage css папка

.popular-header {
 display: none;
}

Поэтому, когда я go на странице категории, все в порядке, моего заголовка там нет. Но когда я возвращаюсь на домашнюю страницу, мой заголовок также исчез. Потому что мой класс переопределил это (нет). Если бы была только часть заголовка, которую я хочу изменить, я мог бы передать реквизит и сделать его условно визуализированным. Но есть также некоторые классы, которые я хочу изменить. Это так странно. Две разные страницы, но они соединяют друг друга, я думаю, некоторые проблемы SPA. Есть предложения?

Answer 1

Скажем, у вас есть компонент с именем PopularHeader, определите имя опоры style (или что-то вроде extraStyle, если хотите)

const PopularHeader = ({ style }) => {
    <View className="popular-header" style={{...style}}/>
}

и у вас есть нормальный класс css

.popular-header {
    display: flex;
}

Нормаллуй, вы называете компонент следующим образом:

<PopularHeader />;

Когда вы переходите на другую страницу и хотите, чтобы заголовок исчезал, просто:

<PopularHeader style={{ display: none }}/>;

Answer 2

Стили

CSS являются глобальными, поэтому любой компонент будет иметь к ним доступ независимо от того, в каком файле они находятся. Попробуйте использовать стороннюю библиотеку css или js до css, или вы можете изменить файлы в fileName.module. css и импортируйте классы из этого файла. Затем вам нужно будет пометить каждое className на {classes.style} и теперь оно должно быть уникальным для их соответствующих компонентов.

import classes from './fileName.module.css'