Описание тега css-in-js

Вопросы о написании CSS на JavaScript с использованием библиотек, таких как стилизованные компоненты или эмоции.
0 ответов

Как импортировать стили CSS-in-JS меньше

У нас есть пакет @atlaskit/theme, который экспортирует стили в js. Этот пакет работает очень хорошо, когда импортируется в js и используется в компонентах с помощью https://www.styled-components.com/. Теперь у нас меньше файлов стилей, в которых мы …
10 дек '18 в 04:42
3 ответа

Как стилизовать тег body с помощью подхода CSS-in-JS?

Я новичок в CSS-in-JS и эмоциях, и пытаюсь портировать приложение sas реакции на эмоции. С самого начала у меня уже была проблема не знать, как стилизовать тег body. Люди обычно используют document.body.style сделать это? Я не могу найти это покрыто…
15 дек '18 в 17:01
1 ответ

CSS-in-JS реализация, которая хорошо работает с DevTools

Любопытно, есть ли у кого-нибудь совет для рабочего процесса разработки, который не нарушает способность браузера DevTools для UX Engineer легко изменять, манипулировать и понимать CSS. Я понимаю, как CSS-инкапсуляция является фантастической для раз…
6 ответов

Emotion CSS функция не рендеринга стилей (React)

Я использую Webpack 4, Babel 7 и Emotion 10. Я установил @emotion/ Core @ Emotion / Styled и рекомендуемый плагин babel-plugin-emotion Стиль работает правильно. Я могу создать стилизованный компонент и использовать его. Тем не менее, если я пытаюсь …
28 ноя '18 в 18:30
2 ответа

Что делает комментарий /** @jsx jsx */ в библиотеке Emotion CSS-in-JS?

Это, кажется, лучшая практика, так как она используется практически везде. Впрочем, нигде четко не объясняется, что именно он делает... В документах я нашел комментарий, который гласил: "Этот комментарий говорит babel преобразовывать jsx в вызовы фу…
16 дек '18 в 15:08
1 ответ

Стилизация ReactSelect с помощью CSS-in-JS

Вот ссылка на еще одну хорошую публикацию stackru, на которой я основываю свой первоначальный ответ. Я пытаюсь стилизовать свой компонент ReactSelect так, чтобы он выглядел примерно так: Это не очевидно из скриншота выше, но поле выбора имеет гораз…
09 фев '19 в 23:31
1 ответ

Переопределить стиль пользовательского интерфейса материала без использования HOC?

Есть ли способ переопределить стили компонентов Material UI, не создавая совершенно новый компонент, используя withStyles()? Например, скажите, что я рендерил следующее, и я просто хочу изменить цвет метки "Удалить": <div style={styles.rowFooter}…
26 фев '19 в 18:15
0 ответов

Неверный порядок в стиле JSS - Material-UI

У меня ситуация, когда стили JSS моей библиотеки компонентов MUI (стили A) превосходят стили, предоставляемые веб-сайтом потребителя (стили B). Стили A предназначены для перезаписи стилями B. Возьмите этот минимальный пример: Стили A (в библиотеке к…
28 ноя '18 в 01:48
1 ответ

Разве CSS-in-JS не мешает браузеру кэшировать CSS?

Я ищу лучшие практики для стиля приложения React с рендерингом на стороне сервера. Я вижу различные варианты, такие как использование препроцессоров, таких как SASS, или размещение стилей внутри кода JS, таких как JSS, компоненты стиля и т. Д. Играя…
22 янв '19 в 09:21
0 ответов

Ошибка no-duplicate-selectors для разных селекторов внутри одного файла

Я использую stylelint в проекте CSS-IN-JS (здесь используется astroturf, но я сталкиваюсь с тем же шаблоном, использующим любую библиотеку CSS-IN-JS, например, styleled-components). Я определяю различные стилизованные элементы в одном и том же файле…
27 ноя '18 в 12:29
1 ответ

Совместимость браузера CSS со стилевыми компонентами и Gatsby

Я оформляю свой сайт Gatsby.js с помощью стилевых компонентов CSS-in-JS. Gatsby (или styled-components, или Webpack) делают мой CSS-совместимым для меня? Например, скажем, я оформляю форму. С традиционным CSS я бы сделал что-то вроде: button, input,…
13 дек '18 в 04:09
0 ответов

Linaria CSS взаимодействует с ReasonML?

Я хочу использовать разум-реакцию вместе с Линарией. У меня проблема в том, что плагин Linaria Babel, кажется, работает только тогда, когда он встречает следующий теговый строковый литерал в исходном коде: css`...` и я не могу найти способ заставить…
18 янв '19 в 11:07
2 ответа

Как я могу добавить стиль к элементу тела с помощью JSS?

Я создаю приложение с использованием act-jss для стилизации моих компонентов и хотел узнать, возможно ли добавить стили к элементам верхнего уровня (например, html или же body). Чтобы проиллюстрировать это, у меня есть простой компонент NotFound, ко…
15 янв '19 в 14:57
12 ответов

Установка правил псевдокласса CSS из JavaScript

Я ищу способ изменить правила CSS для селекторов псевдоклассов (таких как: ссылка,: наведение и т. Д.) Из JavaScript. Итак, аналог кода CSS: a:hover { color: red } в JS. Я не мог найти ответ где-либо еще; Если кто-то знает, что это то, что браузеры …
22 ноя '08 в 07:58
0 ответов

Автоматизированное интеграционное тестирование с созданными именами классов

Я использую Reaction.js для приложения и React-JSS для стиля. Поскольку css-классы сгенерированы, я не могу определить некоторые инструкции для тестирования интеграции с codeceptjs, такие как наведение мыши на что-то. Сгенерированные css-классы выгл…
1 ответ

Интенсивный FOUC при использовании Next.js 8 и styled-jsx

Я недавно обновился до Next.js 8.0.3 от 6.1.1 и теперь я сталкиваюсь с очень интенсивной вспышкой нестандартного содержимого (FOUC) для содержимого моего заголовка, которое использует styled-jsx, Он загрузился нормально перед обновлением Next.js. Ко…
07 мар '19 в 17:52
1 ответ

Как называется синтаксис JSS для ссылки на сгенерированные имена классов?

Material UI использует JSS в своей основе, и вам иногда нужно переопределить стили из их базовых компонентов. Пример из Input: '&:hover:not($disabled):before'{ ... } Я не могу найти этот синтаксис, упомянутый в документации по синтаксису JSS, по…
08 мар '19 в 16:20
2 ответа

Нужна помощь по стилю MaterialUI MenuItem Компонент

Я пытаюсь стилизовать пункт меню, используя среду MaterialUI, и чувствую себя потерянным. Вот для чего я иду: https://i.stack.im gur.com/x27kG.png И вот что я получил, пока: https://codesandbox.io/s/542wvq4mxl Любая помощь будет принята с благодарно…
14 мар '19 в 21:17
0 ответов

Материал пользовательского интерфейса CSS-in-JS

Я настраиваю проект, используя React, React Admin, Babel, TypeScript и Webpack. Я использую редактор VSCode. Я пытаюсь использовать новое решение для стилей пользовательского интерфейса, а затем API-интерфейс Styled Components. Я настроил TSLint, по…
1 ответ

Переопределение материала Вкладка пользовательского интерфейса Индикатор эмоций в стиле

Попытка выяснить, как переопределить стили индикатора вкладок, используя стиль из Emotion. Я не уверен, как получить доступ к вложенным классам. Это то, что у меня есть, но оно меня туда не доставляет: const StyledTabs = styled(Tabs)( { classes: { i…
15 мар '19 в 21:55