Изменение стилей CSS после перевода html начальной загрузки в стиль activ.js jsx - PullRequest
0 голосов
/ 06 декабря 2018

У меня простой структурированный проект: html (с Bootstrap) css и js file.Я создал проект React.js (через create-реагировать на приложение в npm).Я установил Bootstrap, JQuery и так далее.Проблема в том, что когда я перевел свой html-файл в jsx, React, кажется, игнорирует стили (которые я применил как обычно в React).Он игнорировал сетку.У меня есть 3 ряда с одним элементом на левой стороне в одном из них и два ряда с 3 элементами (col-sm-4 col-md-4 col-lg4) в каждом ряду.В моем старом проекте (чистый html, css, js) он работает нормально, но в этом проекте React он ведет себя так ... как в мобильной версии (один элемент под другим в каждой строке).Между тем, используя инструменты разработки, я вижу, что эти строки и столбцы все еще существуют в коде браузера, но имеют пустые стили ... не могли бы вы рассказать, что происходит?Где мне искать причину этой проблемы?

1 Ответ

0 голосов
/ 06 декабря 2018

Если вы просто используете стандартный React, вам нужно включить в тег <head></head> следующее public/index.html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Если вы используете конструктор, такой как Webpack, запустите npm install bootstrap и include зависимость внутри вашей src/index.js.

Если все это сделано правильно, правильный стиль для стиля реагирующих компонентов будет следующим:

Тег стилянапрямую:

<div style={{margin: '10px'}}>This is a div!</div>

Стиль с помощью класса Bootstrap:

<button className="btn btn-primary">Click me!<button>

Полезные ссылки:

https://getbootstrap.com/docs/4.1/getting-started/introduction/

https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...