Как добавить разные стили CSS на страницы в ReactJS?

Я создаю многостраничное приложение с использованием ReactJS, и мне нужны разные стили для разных страниц, особенно положение логотипа.

Это мой файл App.js

import React from 'react';

import Login from './user/Login';
import Auth from './user/Auth';
import Home from './user/Home';
import ResetPassword from './user/ResetPassword';
import './App.css';

const App=()=>{
        //ROUTING
 }

export default App;

Последний импортированный файл всегда перезаписывает свойства стиля всего приложения. Мне нужно соответствующим образом изменить положение логотипа на каждой странице, а также другие вещи. Как добавить разные свойства css для каждой страницы?

Добавьте родительский класс в каждый файл и добавьте css под этим родителем.

— 11.06.2019 12:37

Вы должны использовать либо модули CSS, либо стилизованные компоненты.

— 11.06.2019 12:43

css reactjs import

11.06.2019 12:31

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 605

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Создайте структуру папок, как показано ниже. И импортировать свои собственные файлы css. Если вы используете sass, используйте уникальные имена классов. Для сторонних компонентов вам может понадобиться использовать «!important» в файлах css.

common/
  Avatar.js
  Avatar.css
feed/
  index.js
  Feed.js
  Feed.css
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

и вы можете прочитать это: https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

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

— 11.06.2019 12:46

Использование модулей CSS обеспечит уникальность, поэтому ваш CSS не будет переопределен и останется модульным. facebook.github.io/create-react-app/docs/…

— 11.06.2019 12:49

11.06.2019 12:43

Ответ принят как подходящий

Вы можете использовать или модуль css (для этого вам нужно внести изменения в веб-пакет). https://programmingwithmosh.com/реагировать/css-модули-реагировать/ Также вы можете использовать компоненты в стиле пакета https://www.styled-components.com/ В этом случае у вас есть уникальные стили для всех компонентов.

Вам не нужно использовать стили (цвет фона) из файла, который переопределяет, задайте настройки цвета фона прямо внутри ваших компонентов (модуль css). Если по какой-то причине вам нужен цвет фона в этом файле - попробуйте использовать ! важно внутри модуля css.

— 11.06.2019 13:24

Кроме того, вы можете добавить класс выше и сделать свой css более конкретным (.class1 .class2{background-color:red}). Но лучше не используйте этот стиль в вашем App.css.

— 11.06.2019 13:27

11.06.2019 12:44