Публикации по теме 'css-in-js'


Смелый компонент React
Я работаю над базовым индексным приложением для поиска выпускников, используя VulcanJS . Он использует Реакт. Я использую гламурный для укладки. Он действительно чистый и простой в использовании. Он вдохновлен гламуром, еще одним очень популярным решением css в js, созданным потрясающим Безумным ученым Сунил Пай . Я хотел создать компонент, который просто берет кучу строк, заключает их в выбранный элемент HTML и выделяет их текстовые узлы жирным шрифтом. Это казалось простым, но..

EmotionJS: Под капотом
Всем привет! В этой статье я бы поделился тем, что обнаружил, копаясь под кожей библиотеки Emotion-js . Мотивация Я довольно долго исследовал CSS-in-js и его преимущества, так как хотел включить его в один из моих проектов, над которыми я работаю в Postman. Поэтому я попытался просмотреть некоторые из лучших библиотек на рынке, чтобы проверить, какая из них подходит для моей цели. Чтобы измерить их с точки зрения операций времени выполнения, компромиссов перерисовки браузера и..

Вопросы по теме 'css-in-js'

Как я могу добавить стиль к основному элементу с помощью JSS?
Я создаю приложение, используя response-jss для стилизации моих компонентов, и хотел знать, можно ли добавлять стили к элементам верхнего уровня (например, html или body ). Чтобы проиллюстрировать, у меня есть этот простой компонент NotFound,...
4016 просмотров
schedule 22.04.2022

Стилизация ReactSelect с помощью CSS-in-JS
Вот ссылка на другой хороший stackoverflow сообщение, на котором я основываю свой первоначальный ответ. Я пытаюсь стилизовать свой компонент ReactSelect так, чтобы он выглядел примерно так: На снимке экрана выше это не очевидно, но поле...
9588 просмотров
schedule 08.12.2022

Как стилизовать дочерние элементы активных ссылок с помощью CSS в JS и React Router?
Я использую React ROuter и CSS в JS для стиля. Я хочу изменить цвет фона и цвет границы для дочерних элементов div активных ссылок (navIndicator и innerIndicator) import { css, StyleSheet } from 'aphrodite/no-important'; export default ({ task,...
678 просмотров
schedule 16.10.2023

Случайные классы отображаются, когда мы используем стилизованные компоненты?
Использую стилизованные компоненты в React. Всякий раз, когда я пишу стили в стилизованном компоненте и если загружаю приложение в браузере, я получаю случайное имя класса на вкладке элементов инструментов разработчика. Я просто хочу знать, что...
2854 просмотров

Стилизованные компоненты используют функцию в стилизованном объекте
Не удалось найти четкий пример использования функций в объектах css с styled-components . Это не ошибка, но фон не добавляется в вывод CSS при извлечении реквизита, как в примере ниже. // Simple color function const color = (error) => { if...
403 просмотров

Гэтсби и Theme-UI ColorModeProvider
Я экспериментировал с различными стратегиями загрузки шрифтов с помощью Gatsby и в конце концов справился с источником gatsby-plugin-theme-ui , чтобы я мог обновлять значения theme.fonts после загрузки всех шрифтов клиентом (по умолчанию...
535 просмотров
schedule 01.08.2022

Tailwind CSS: до псевдокласса
Я сейчас работаю кругами, пытаясь понять, что происходит. Я делаю библиотеку дизайна, используя сборник рассказов с Tailwind. Кажется, я не могу заставить псевдокласс: before работать. Независимо от того, где я размещаю его в стиле, он никогда не...
8926 просмотров

Символы в ‹style› преобразованы в Unicode HTML Entity в запросах из разных источников
У меня есть приложение NextJS, которое использует response-jss. В моем CSS есть правило, которое нацелено на '& .working[style="display: block;"] ': {...} Я могу собрать, запустить и увидеть, что это нормально работает, когда я...
158 просмотров
schedule 16.05.2022

MaterialUI TextField: изменение цвета фона не работает должным образом
Я пытаюсь установить цвет фона для TextField компонентов в приложении, над которым я работаю, однако кажется, что когда я добавляю style={{background: "rgb(232, 241, 250)"}} к этому компоненту с моими пользовательскими значениями RGB, он...
3356 просмотров
schedule 20.01.2024

Не удалось использовать одно и то же имя класса для разных компонентов. CSS не ограничивается компонентом стиля
Проблема, с которой я столкнулся, кажется, сводит на нет саму цель CSS в JS. Я использую стилизованные компоненты. И когда я попытался использовать имя класса, которое используется где-то в дереве реакции внутри стилизованного компонента. Стили...
467 просмотров

Каков предпочтительный способ передачи стилей детям в React & Emotion JS?
Я только начинаю работать с эмоциями после работы с react-jss на несколько лет. Я пытаюсь найти хороший пример передачи (некоторых, возможно, динамических) стилей дочернему компоненту. В react-jss это было довольно тривиально: // In...
705 просмотров
schedule 02.04.2022

Запретить неиспользуемые свойства объекта
Я использую Typescript и React с Material-UI. Я использую решение для стилизации Material-UI (CSS в JS) в стиле Hook, как описано в их документах: const useStyles = makeStyles({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%,...
134 просмотров

Есть ли способ нацелить вложенный компонент в стиле JSS в другой компонент в стиле JSS? [JSS-nested / Styled-JSS / Material UI (React)]
Можно ли настроить таргетинг на стилизованный объект JSS в другом стилизованном объекте JSS таким же образом, как это позволяют стилизованные компоненты? Вот пример того, о чем я говорю со стилизованными компонентами: const Child = styled.div`...
130 просмотров