Как использовать css в react?
Пробовал найти и запустить какие-то проекты с GitHub, но ничего не работает. Постоянно всегда какие-то ошибки. В issues просто тупо закрывают твой вопрос. Покажите нормальный пример, где это работает? Пересмотрел все туториалы, но не работает оттуда тоже ничего! Как же всё надоело. Какая-то жуткая костыльная и дурацкая технология этот react! webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = < entry: './app/client.js', output: < filename: 'bundle.js', path: 'public/js' >, module: < loaders: [ < test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: < presets: ['react', 'es2015', 'stage-1'] >>, < test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') >], >, plugins: [ new ExtractTextPlugin("styles.css"), ] >; Отслеживать
задан 9 мар 2017 в 4:44
163 1 1 серебряный знак 8 8 бронзовых знаков
Вы хотите писать css в jsx файлах?
9 мар 2017 в 4:58
Да, именно! Я хочу import css from ‘./style.css’ Но не работает! Все настройки по сто раз менял-переменял, но не получается нифига. Использую webpack.
9 мар 2017 в 5:22
Покажите настройки webpack для css
9 мар 2017 в 5:24
Закинул в пост. Эта одна из настроек, которая не работает. Я всё перепробовал. Дело в том, что во всяких туториалах показывают, как делать на обычном примере, или устаревших версиях. Но как только ты подключаешь всё вместе: jsx, server-rendering и т.д. Всё, всё рушится к чертям! Как с этим быть — никто не говорит!
9 мар 2017 в 5:42
т.е. файл styles.css у вас не появляется? У меня почти такой-же конфиг, только для less с добавленным одним лоадером. Не знаю что у вас может не работать. Может вы просто не подключаете к странице файл styles.css ? И react это не костыльная технология)
5 подходов к стилизации React-компонентов на примере одного приложения
Сегодня я хочу поговорить с вами о стилизации в React.
Почему данный вопрос является актуальным? Почему в React существуют разные подходы к работе со стилями?
Когда дело касается разметки (HTML), то React предоставляет в наше распоряжение JSX (JavaScript и XML). JSX позволяет писать разметку в JS-файлах — данную технику можно назвать «HTML-в-JS».
Однако, когда речь идет о стилях, то React не предоставляет каких-либо специальных инструментов (JSC?). Поэтому каждый разработчик волен выбирать такие инструменты по своему вкусу.
Всего можно выделить 5 подходов к стилизации React-компонентов:
- Глобальные стили — все стили содержатся в одном файле (например, index.css)
- Нативные CSS-модули — для каждого компонента создается отдельный файл со стилями (например, в директории «css»); затем эти файлы импортируются в главный CSS-файл (тот же index.css) с помощью директивы «@import»
- «Реактивные» CSS-модули (данная техника используется не только в React-проектах; «реактивными» я назвал их потому, что библиотека «css-modules» в настоящее время интегрирована в React, т.е. не требует отдельной установки, по крайней мере, при использовании «create-react-app») — для каждого компонента создается файл «Component.module.css», где «Component» — название соответствующего компонента (обычно, такой файл размещается рядом с компонентом); затем стили импортируются в JS-файл в виде объекта, свойства которого соответствуют селекторам класса (например: import styles from ‘./Button.module.css’; )
- Встроенные («инлайновые») стили — элементы стилизуются с помощью атрибутов «style» со значениями в виде объектов со стилями (например, )
- «CSS-в-JS» — библиотеки, позволяющие писать CSS в JS-файлах; одной из таких библиотек является «styled-components»: import styled from ‘styled-components’; const Button = styled`какой-то css`;
Шпаргалку по использованию библиотеки «styled-components» можно найти здесь. Возможно, вам также интересно будет взглянуть на шпаргалку по хукам.
Ну, а худшим подходом, по моему мнению, являются встроенные стили. Стоит, однако, отметить, что определение объектов со стилями перед определением компонента и последующее использование этих объектов напоминает CSS-в-JS, но остаются «camelCase-стиль», атрибуты «style» и сами встроенные стили, которые затрудняют инспектирование DOM.
Предлагаю вашему вниманию простое приложение-счетчик, реализованное на React, в котором последовательно используются все названные подходы к стилизации (за исключением встроенных стилей).
Выглядит приложение так:
Приложение состоит из трех компонентов: Title — заголовок, Counter — значение счетчика и информация о том, каким является число: положительным или отрицательным, четным или нечетным, Control — панель управления, позволяющая увеличивать, уменьшать и сбрасывать значение счетчика.
Структура проекта следующая:
|--public |--index.html |--src |--components |--Control |--Control.js |--Control.module.css |--package.json |--styles.js |--Counter |--Counter.js |--Control.module.css |--package.json |--styles.js |--Title |--Title.js |--Title.module.css |--package.json |--index.js |--css |--control.css |--counter.css |--title.css |--App.js |--global.css |--index.js |--nativeModules.css |--reactModules.css . Пройдемся по некоторым файлам, находящимся в директории «src»:
- index.js — входная точка JavaScript (в терминологии «бандлеров»), где импортируются глобальные стили и рендерится компонент «App»
- App.js — основной компонент, где импортируются и объединяются компоненты «Control», «Counter» и «Title»
- global.css — глобальные стили, т.е. стили всех компонентов в одном файле
- nativeModules.css — файл, где импортируются и объединяются нативные CSS-модули из директории «css» (control.css, counter.css и title.css)
- reactModules.css — глобальные стили для «реактивных» CSS-модулей
- components/Control/Control.js — три реализации компонента «Control» (с глобальными стилями/нативными CSS-модулями, c «реактивными» CSS-модулями и стилизованными компонентами), а также пример объекта со встроенными стилями
- components/Control/Control.module.css — «реактивный» CSS-модуль для компонента «Control»
- components/Control/styles.js — стилизованные компоненты для компонента «Control» (когда стилизованных компонентов много, я предпочитаю выносить их в отдельный файл)
- components/Control/package.json — файл с «main»: «./Control», облегчающий импорт компонента (вместо import Control from ‘./Control/Control’ можно использовать import Control from ‘./Control’
- components/index.js — повторный экспорт, позволяющий разом импортировать все компоненты в App.js
Благодарю за внимание и хорошего дня.
- Веб-разработка
- JavaScript
- Программирование
- ReactJS
Как импортировать файл CSS в компонент React
Модуль не найден: Ошибка: не удается разрешить «файл» или «каталог» ../../../public/styles/disabledLink в c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /client/src/components/ShoppingCartLink.js 19: 20-66 Хеш: 2d281bb98fe0a961f7c4 Версия: webpack 1.13.2
C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css это местоположение файла CSS, который я пытаюсь загрузить.
Мне кажется, что импорт не ищет правильный путь.
Я подумал, что с ../../../ его помощью начну искать путь тремя слоями папок выше.
C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js — это расположение файла, который должен импортировать файл CSS.
Что я делаю не так и как это исправить?
Стилизация и CSS
Совет
Если вы часто пишете похожий код, то пакет classnames поможет упростить его.
Можно ли использовать встроенные стили?
Встроенные стили — это плохо?
CSS-классы, как правило, лучше для производительности, чем встроенные стили.
Что такое CSS-in-JS?
«CSS-in-JS» — это паттерн, в котором CSS-код создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах.
Обратите внимание, что данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками. React ничего не знает про то, как определяются стили. Если вы сомневаетесь, использовать указанный выше способ, то хорошим началом станет определение стилей в отдельном файле с расширением *.css , как вы ранее привыкли это делать, а затем указать нужные классы с помощью className .
Можно создавать анимации в React?
React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки React Transition Group, React Motion, React Spring или Framer Motion.