Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 15.11.2017, 20:42   #1
SnapeEye
Пользователь
 
Регистрация: 08.11.2014
Сообщений: 43
Репутация: 10
Вопрос React не применяются стили

Доброго времени суток!

Имею следующую ситуацию - подключаю к js файлу css stylesheet, но стили не применяются. Имена классов в теги добавляются, а стилей нет.
Не добавляются как в таком варианте:
Код:

import React from 'react';
import './index.css'; // ФАЙЛ СО СТИЛЯМИ
 
export default class RegisterForm extends React.Component {
    render() {
        return (
            <div>
                <div className='margin_top_20'>
                    <input type='button' value='Register' />
                </div>
 
                <div className='margin_top_20'>
                    <a href=''>If you are already registered - Sign In</a>
                </div>
            </div>
        );
    }
}

Так и в таком:
Код:

import './index.css'; // ФАЙЛ СО СТИЛЯМИ
ReactDOM.render(
       React.createElement('div', {className: 'posCenter', id: 'registration'}, null),
       document.body
);

Файл со стилями выглядит так:
Код:

.posCenter {
    text-align: center;
}
 
.posRight {
    text-align: right;
}
 
.posCenter p {
    margin-bottom: 0px;
}
 
.margin_top_20 {
    margin-top: 20px;
}
 
ul li {
    cursor: pointer;
    position: relative;
}
 
ul li:hover {
    background: #ddd;
}
 
ul li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}
 
.close {
    position: absolute;
    right: 0;
    top: 0;
}
 
.close:hover {
    background-color: #f44336;
    color: white;
}

Проверял в интернете, такой способ подключения и использования корректен.
Подскажите, пожалуйста, в чем проблема?

Заранее благодарю за любые советы и подсказки!
SnapeEye вне форума   Ответить с цитированием
Старый 15.11.2017, 21:41   #2
ADSoft
Профессионал
 
Регистрация: 25.02.2007
Адрес: Татарстан
Сообщений: 3,249
Репутация: 912

icq: 303-206-418
skype: ad-soft.info
По умолчанию

посмотрите ошибки в консоли ....
может дело в путях к css ? посмотрите вкладку сеть - подгружается ли он
ADSoft вне форума   Ответить с цитированием
Старый 15.11.2017, 22:31   #3
SnapeEye
Пользователь
 
Регистрация: 08.11.2014
Сообщений: 43
Репутация: 10
По умолчанию

Цитата:
Сообщение от ADSoft Посмотреть сообщение
посмотрите ошибки в консоли ....
может дело в путях к css ? посмотрите вкладку сеть - подгружается ли он
В Source нашел index.css, однако компоновщик его несколько преобразил:
Код:

exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(undefined);
// imports


// module
exports.push([module.id, ".posCenter {\n\ttext-align: center;\n}\n\n.posRight {\n\ttext-align: right;\n}\n\n.posCenter p {\n\tmargin-bottom: 0px;\n}\n\n.margin_top_20 {\n\tmargin-top: 20px;\n}\n\n/* Style the list items */\nul li {\n    cursor: pointer;\n    position: relative;\n}\n\n/* Darker background-color on hover */\nul li:hover {\n    background: #ddd;\n}\n\n/* When clicked on, add a background color and strike the text */\nul li.checked {\n    background: #888;\n    color: #fff;\n    text-decoration: line-through;\n}\n\n/* Style the close button */\n.close {\n    position: absolute;\n    right: 0;\n    top: 0;\n}\n\n.close:hover {\n    background-color: #f44336;\n    color: white;\n}", ""]);

// exports



//////////////////
// WEBPACK FOOTER
// ./node_modules/css-loader?{"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss"}!./src/index.css
// module id = ./node_modules/css-loader/index.js?{"importLoaders":1}!./node_modules/postcss-loader/lib/index.js?{"ident":"postcss"}!./src/index.css
// module chunks = 0

Он всё в одну строку добавил... Это нормально?
SnapeEye вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
React и не только exzomotion Общие вопросы Web 0 08.11.2017 19:58
Резюме на React fAtliNg JavaScript, Ajax 3 07.11.2017 16:45
После того как залил сайт на хостинг не применяются стили Azamat99 HTML и CSS 2 19.08.2017 18:48
Как переопределить стили - не применяются стили совсем. mf`r HTML и CSS 12 08.02.2017 20:55
Не применяются стили CSS в динамически загружаемом блоке. alextrof94 JavaScript, Ajax 16 05.09.2013 15:20


20:45.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru