Публикации по теме 'styled-components'
Способы оформления приложений React
Документация React не имеет большого отношения к компонентам стиля. Есть только один раздел под названием Стили и CSS . Раздел отвечает только на основные вопросы.
За прошедшие годы было несколько подходов к стилизации компонентов React. Давайте рассмотрим их по отдельности и объясним их плюсы и минусы.
Глобальный стиль
Возможность повторного использования компонентов с помощью React и styled-components
React - довольно мощная библиотека для создания компонентов и их компоновки для простого, эффективного и элегантного построения приложения. Таким образом, компоненты являются фундаментальной частью React, но что именно представляет собой компонент React?
Простой компонент React представляет собой композицию виртуальных элементов DOM.
У него есть некоторые методы внутреннего жизненного цикла, которые состоят из прикрепленных к нему событий, где он запускает ваш JS-код, и может..
Что это за тип?!
Что это за тип?!
Если вы новичок в TypeScript и используете такую библиотеку, как react-emotion , вам может быть интересно, как печатать ваши стилизованные компоненты. Вот что я делаю.
Допустим, у вас есть следующий стилизованный компонент:
Какой тип для AStyledComponent ?
Я не знаю, но VSCode здесь, чтобы спасти положение:
На изображении выше показано, как я наводил курсор на AStyledComponent , а VSCode показывает мне, какой это тип. Затем мы можем..
Темы в темах с React, TypeScript и стилизованными компонентами ✨
Как вы структурируете приложение с несколькими темами? Что, если эти темы находятся внутри другой темы?
Недавний проект столкнулся с некоторыми серьезными проблемами. Клиент хотел получить демонстрацию, которая отображала бы ряд различных веб-сайтов в рамках фирменного «контейнера». Эти демонстрационные веб-сайты будут интерактивными в макете рабочего стола или мобильного устройства, каждый со своей собственной индивидуальной темой. В этой статье я подробнее расскажу:
Как мы..
Вопросы по теме 'styled-components'
Как использовать стилизованные компоненты с плагином babel в приложении create-response-app, которое использует TypeScript?
Я прочитал документацию об инструментах для стилизованных компонентов. Мне удалось использовать стилизованные компоненты без плагина babel, но я не смог использовать компоненты стиля с плагином babel. После прочтения документации у меня сложилось...
953 просмотров
schedule
11.12.2022
Могу ли я создавать стилизованные компоненты React на основе классов?
Я только начал изучать использование стилизованных компонентов для веб-приложения JavaScript React, и мне интересно, возможно ли использовать стилизованные компоненты на основе классов. Например:
Функционал (работает):
import styled from...
1519 просмотров
schedule
09.03.2024
Стилизованные компоненты - стили в компоненте не будут применяться, пока я не обновлюсь. Обновление одного компонента нарушает стили другого
У меня есть домашний компонент и компонент проектов. Используя styled-components , я динамически устанавливаю свойство flexbox в компоненте проектов в зависимости от количества проекты входят в реквизит. Но стиль не будет применяться, пока я не...
2002 просмотров
schedule
12.04.2024
Можно ли стилизовать дочерний элемент флажка на основе состояния флажка без использования тернарности в стилизованных компонентах?
Я пытаюсь стилизовать этот компонент с помощью стилизованных компонентов, но мое решение кажется хакерским. Как лучше всего стилизовать этот компонент с помощью стилизованных компонентов?
Используя простой HTML и CSS, я могу создать это:
HTML:...
736 просмотров
schedule
13.05.2024
Комбинируйте несколько стилизованных элементов со стилями-компонентами
Я знаю, что мы можем расширить или добавить стили к существующим компонентам с помощью стилизованных компонентов, таких как компонент Link из react-router-dom . Указанная функция указана здесь . Но моя проблема в том, как я могу объединить два...
7389 просмотров
schedule
06.12.2022
Стилизованный компонент не наследует стили при использовании в качестве атрибута
Я использую styled-system с styled components и имею такой базовый случай:
const buttonFont = {
fontFamily: "Chilanka"
};
// style a boilerplate for text
const Text = styled.div`
${typography}
${color}
`;
// button blueprint
const...
340 просмотров
schedule
28.05.2024
Обновление реквизитов функциональных компонентов не меняет стиль
У меня есть этот функциональный компонент для рендеринга диапазона в виде полосы. Когда я визуализирую компонент, я передаю свойство scrolled как false . Затем jQuery обновляет атрибут до true , когда я прокручиваю 150 пикселей. Я знаю, что...
446 просмотров
schedule
23.01.2024
Добавление сплошной обводки к тексту
Я пытаюсь добавить толстую сплошную обводку к тексту в React Native. Я добавил фрагмент с желаемым CSS.
Я пробовал напрямую применить CSS через стилизованные компоненты, но получаю сообщение об ошибке, указывающее, что мое значение не может быть...
2912 просмотров
schedule
30.04.2024
Извлечь имя класса со стилизованными компонентами
Я использую библиотеку пользовательского интерфейса, которая требует, чтобы вы передали имя класса в реквизите skin , чтобы настроить внутренности компонента. Что-то типа:
import styles from './ProfileInfoSkins.css';
...
<ProfileInfo...
662 просмотров
schedule
05.11.2022
кнопка материала пользовательского интерфейса со стилизованными компонентами
Я использовал эту кнопку пользовательского интерфейса материала, и у нее был фиолетовый фон
<Button
component={Link}
to={link}
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color:...
58 просмотров
schedule
09.06.2024
Как правильно использовать типы TypeScript с холстом стилизованного компонента в React
Я создаю компонент React в Gatsby, используя TypeScript, и определил стилизованный компонент холста следующим образом:
const Background = styled.canvas`
position: fixed;
width: 100%;
height: 100%;
`;
И чтобы использовать его, я назначаю...
1084 просмотров
schedule
05.11.2023
React Native: текст обрезается при использовании numberOfLines и align-items
Я пытаюсь стилизовать заставку, я использую стилизованные компоненты. Я хочу, чтобы текст и изображение можно было пролистывать по экрану, поэтому я создал карточку. теперь текст на карточке не работает только на android, он просто обрезается, когда...
641 просмотров
schedule
09.05.2024
стилизованные компоненты - передача реквизита в GlobalStyle
У меня есть GlobalStyle с некоторыми заменами, например:
const GlobalStyle = createGlobalStyle`
h6 {
font-weight: ${props => (props.semibold ? 600 : "bold")};
font-size: 16px;
}
...
`;
Я хотел бы передать свойства...
418 просмотров
schedule
29.10.2022
Невозможно применить стили к элементу стилизованного компонента в Reactjs
Я пытаюсь обернуть компонент styled-component div и применить некоторые стили. Однако по какой-то причине стили не применяются, даже несмотря на то, что отображается якобы правильная оболочка, которая должна быть отрисована.
CodeSandbox
Что я...
56 просмотров
schedule
15.05.2024
Стилизованные компоненты: родительский стиль, если у дочернего элемента есть атрибут
У меня есть родительский элемент, у которого есть глубоко вложенный дочерний элемент, который может получить атрибут, если он выбран.
Как изменить цвет фона родительского элемента, только если глубоко вложенный дочерний элемент имеет атрибут...
759 просмотров
schedule
23.11.2022
Изменение стиля стилизованных компонентов путем переключения состояния после загрузки страницы
Я могу изменить стили стилизованных компонентов в зависимости от состояния, но только при загрузке страницы. Если я переключаю состояние после загрузки страницы, состояние изменяется успешно, но стили остаются прежними. Стилизованный компонент, стили...
442 просмотров
schedule
17.11.2023
Интерполировать компонент в строку
Есть ли способ отреагировать на интерполяцию компонента в строку объекта?
Я, например, пробовал что-то подобное.
const stringWithHOC = `Some string wording ${<Foobar>Lorem Ipsum</Foobar>} some more string wording`
Предположим, что...
51 просмотров
schedule
27.11.2022
Jest-dom выдает ошибку TypeError: expect().toHaveStyle не является функцией
Я пытаюсь использовать jest-dom для проверки стилей компонента, и у меня возникает ошибка:
"TypeError: expect(...).toHaveStyle is not a function"
Мой компонент представляет собой простую ссылку со стилизованными компонентами:...
2473 просмотров
schedule
24.03.2024
styled-components ThemeProvider не работает в React Native = ›Веб-сборка Expo
Я работаю с небольшим выставочным проектом, где разрабатываю как для iOS / Android, так и для Интернета. Недавно я захотел добавить в проект стилизованные компоненты и все настроил и запустил для Интернета и мобильных устройств, пока я не начал...
268 просмотров
schedule
18.11.2022
Как я могу сохранить свои изменения после того, как они не пересекаются с моим элементом?
Я использую реакцию, и я хочу сделать некоторую анимацию, когда окно просмотра находится на моем нужном элементе, но я хочу запустить его только один раз, поэтому, когда значение наблюдателя равно false, мой стиль элемента не меняется снова на начало....
19 просмотров
schedule
22.05.2024
