Публикации по теме 'css-modules'
Шаблон подключаемых модулей CSS
Шаблон подключаемых модулей CSS – это простой шаблон для написания настраиваемых веб-компонентов с использованием модулей CSS. Этот шаблон должен быть применим к любым фреймворкам веб-компонентов. Чтобы сделать вещи явными, мы применим его к компонентам React здесь. В этом случае мы получаем компоненты React на основе CSS-модулей, которые легко и полностью настраиваются .
Глобальный характер CSS создает проблемы для модульности веб-компонентов из-за возможного конфликта пространств..
Включение css-модулей в create-react-app 1.0.0
Выпущенный на прошлой неделе огромный выпуск create-react-app (CRA) до 1.0.0 содержит массу улучшений и изменений, включая переписывание конфигурации веб-пакета.
Один из моих проектов использует css-modules в извлеченном приложении create-react-app для локальной области видимости CSS. Настройка для этого в предыдущей версии CRA требовала изменения загрузчика CSS webpack, что мы сделаем снова, но на этот раз это немного проще.
1. Извлеките созданное приложение React: Запустите yarn..
Вопросы по теме 'css-modules'
Динамический CSS через реквизит с использованием CSSModules с компонентом React
Я изучаю, как использовать css modules с реакцией, ниже приведен рабочий пример флажка, вот как это выглядит ( чистый HTML + скрипт CSS) без реакции.
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from...
2393 просмотров
schedule
03.12.2022
ReactCSSTransitionGroup с модулями CSS
У меня есть группа ReactCSSTransitionGroup, которую я использую с модулями CSS (и динамическая маршрутизация от реагирующего маршрутизатора, но я считаю, что это работает так, как ожидалось).
<ReactCSSTransitionGroup
component="div"...
2743 просмотров
schedule
09.01.2024
Как использовать глобальные переменные в CSS-модулях?
Я занят изучением React с CSS-модулями и не совсем понимаю, как можно хранить переменные? Например, в Sass вы можете сделать это:
// _variables.scss
$primary-color: #f1f1f1;
// heading.scss
@import './variables';
.heading {
color:...
25843 просмотров
schedule
26.09.2022
Модули CSS - исключают преобразование класса
Я использую модули CSS, и на сегодняшний день все работает отлично.
Мы начали использовать внешнюю UI-библиотеку вместе с собственной, поэтому я пишу такие компоненты:
<div className={styles['my-component']}>
<ExternalUIComponent...
2442 просмотров
schedule
20.02.2024
Анимация не работает, когда происходит событие onClick (react.js)
Я создаю простое меню гамбургера и хочу добавить новое className в элемент, когда происходит событие onClick. Это новое className должно преобразовывать элемент, но когда происходит onClick, элемент исчезает, анимация не работает. Я понимаю, что...
206 просмотров
schedule
01.04.2024
Могу ли я сказать style-loader, чтобы он загружал мой глобальный CSS перед моими модулями CSS?
Большая часть моего сайта использует классы Bulma для некоторых из моих глобальных стилей пользовательского интерфейса, и я хотел бы продолжать использовать эти классы в своих компонентах, но также иметь возможность определять модули CSS для этих...
771 просмотров
schedule
13.01.2024
Как лучше всего настроить библиотеку компонентов React с помощью Webpack, typescript, css-модулей и SASS
Я настраиваю библиотеку компонентов React для повторного использования в других наших проектах. Я хочу использовать это:
Машинопись для компонентов
Модули css
Sass
Webpack для бандла
Итак, это моя конфигурация веб-пакета:...
773 просмотров
schedule
09.06.2024
linear-gradient над Gatsby-Background-Image
У меня есть изображение, на которое я ссылаюсь с запросом Graphql в своем коде. На этом изображении я хочу иметь линейный градиент, который находится в моем модуле css. Как я могу сделать это без использования css, написанного в моем файле...
45 просмотров
schedule
23.04.2024
