Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.11.2017, 19:42   #1
SnapeEye
Пользователь
 
Регистрация: 08.11.2014
Сообщений: 43
Вопрос 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, 20:41   #2
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

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

Цитата:
Сообщение от 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 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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