Почему стиль CSS исчезает в React при прямом изменении маршрута в URI браузера? - PullRequest
Новая
       4

Почему стиль CSS исчезает в React при прямом изменении маршрута в URI браузера?

0 голосов
/ 26 марта 2020

У меня есть простое внешнее приложение React, созданное с помощью npx create-Reaction-app. Приложение использует маршруты React-router-DOM. Когда я напрямую изменяю URI в браузере, скажем, с localhost:3000/ на localhost:3000/search, он будет переходить к <Route>, но без CSS визуализации; просто HTML от компонента.

Как я могу убедиться, что CSS отображается на новом маршруте при прямой навигации в браузере? Моя будущая цель - иметь возможность копировать и вставлять маршрут в новую вкладку, переходить на правильную страницу и отображать результаты из API.

Ответы [ 3 ]

0 голосов
/ 26 марта 2020

Вы можете использовать styled-компоненты. стилевые компоненты широко используются в ReactJs и React Native, и это идеальный выбор.

стилевые компоненты: https://www.npmjs.com/package/styled-components

0 голосов
/ 31 марта 2020

Я понял, что реагирующие приложения, созданные с использованием npx create-react-app, позволяют импортировать модуль css для компонентов.

Учитывая компонент Button.jsx, вы можете просто создать модуль css с условным обозначением [module-name].module.css. Для случая Button.jsx создайте файл с именем Button.module.css, импортируйте «стили» из модуля. Стили будут объектом, содержащим все стили CSS.

Если бы у меня была папка «компоненты» со всеми моими компонентами, я мог бы создать папку в «компонентах», скажем, под названием «compStyles», и создайте там все файлы [module-name].module.css.

Button.module. css: 

/* class names must be camelCased */
.myButton {
     margin: 0 auto;
}

span {
    fontSize: 20px;
}

Если бы у меня была вышеупомянутая файловая структура, я мог бы импортировать и использовать так : 

import React from 'react';
import styles from './styles/Button.module.css';

const Button = () => {
    return (
        <div className={styles.myButton}>
            <button><span>Some Button</span></button>
        </div>
    )
}
export default Button;

Стили для диапазона будут применены автоматически, и на любой другой класс будет ссылаться styles.className. Создайте один файл для каждого компонента, и каждый компонент CSS позаботится о себе и не сломается, как если бы он находился в папке publi c.

0 голосов
/ 26 марта 2020
Таблицы стилей

Css необходимо импортировать либо на уровне root, либо внутри самого файла. Таблицы стилей

необходимо импортировать при использовании, а затем необходимо использовать соответствующее имя класса. внутри компонента или тега.

Еще один полезный способ установить реакцию css без таблиц стилей - использовать стили линий

например, 

<div style ={{float: "right", textAlign : "center"}}> </div>

РЕДАКТИРОВАТЬ

Действительно просто способ заставить стили работать в реактивном проекте - это установить bootstrap.

, тогда кнопкам и прочим можно присвоить имена классов, такие как 

<div className = "jumbotron"></>

, чтобы вокруг элементов оставалась серая рамка. 

<div className = "btn btn-primary"></>

это даст вам синюю стилевую кнопку.

Если вам нужна дополнительная информация или помощь в вашем приложении, дайте мне знать и предоставьте некоторые фрагменты кода.

...