Публикации по теме '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 просмотров
schedule
13.08.2022
Стилизованные компоненты используют функцию в стилизованном объекте
Не удалось найти четкий пример использования функций в объектах css с styled-components . Это не ошибка, но фон не добавляется в вывод CSS при извлечении реквизита, как в примере ниже.
// Simple color function
const color = (error) => {
if...
403 просмотров
schedule
13.03.2023
Гэтсби и Theme-UI ColorModeProvider
Я экспериментировал с различными стратегиями загрузки шрифтов с помощью Gatsby и в конце концов справился с источником gatsby-plugin-theme-ui , чтобы я мог обновлять значения theme.fonts после загрузки всех шрифтов клиентом (по умолчанию...
535 просмотров
schedule
01.08.2022
Tailwind CSS: до псевдокласса
Я сейчас работаю кругами, пытаясь понять, что происходит. Я делаю библиотеку дизайна, используя сборник рассказов с Tailwind. Кажется, я не могу заставить псевдокласс: before работать. Независимо от того, где я размещаю его в стиле, он никогда не...
8926 просмотров
schedule
30.12.2021
Символы в ‹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 просмотров
schedule
02.06.2023
Каков предпочтительный способ передачи стилей детям в 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 просмотров
schedule
22.04.2024
Есть ли способ нацелить вложенный компонент в стиле JSS в другой компонент в стиле JSS? [JSS-nested / Styled-JSS / Material UI (React)]
Можно ли настроить таргетинг на стилизованный объект JSS в другом стилизованном объекте JSS таким же образом, как это позволяют стилизованные компоненты?
Вот пример того, о чем я говорю со стилизованными компонентами:
const Child = styled.div`...
130 просмотров
schedule
10.06.2022