Публикации по теме 'styled-components'
Введение в стилизованные компоненты React
Введение
React Styled Components — это простой способ включить стили в ваши компоненты React. У него очень низкий начальный уровень для разработчиков, знакомых с CSS, но еще не знакомых с библиотеками дизайна, такими как Bootstrap или Ant Design. Кроме того, его очень легко настроить в приложении и приступить к работе, что вы увидите ниже. Использование стилизованных компонентов устраняет необходимость использования встроенных стилей в вашем рендеринге React, поэтому это дополнительно..
Стилизованные компоненты, стилизованные системы и принцип их работы
Иногда библиотеки, которые мы используем ежедневно, могут показаться немного волшебными. Потратив время на понимание фундаментальных функций JavaScript, которые делают эти библиотеки возможными, мы лучше подготовлены к тому, чтобы улучшить использование этих библиотек, применяя их функциональные возможности уникальными и актуальными способами.
В React есть две библиотеки, которые работают вместе, чтобы сделать создание презентационных компонентов очень простым: styled-components и..
Как стилизовать компоненты React — основные 3 способа
Стилизация необходима в каждом реактивном проекте. Мы используем как пользовательский CSS, так и внешние библиотеки, такие как react bootstrap, для стилизации реагирующих компонентов. В этой статье я пишу о различных способах/стратегиях, как мы можем связать стили с нашими реактивными проектами.
Популярные стратегии укладки, которые будут обсуждаться в этой статье:
1. Таблицы стилей CSS и SCSS 2. Модули CSS 3. Стилизованные компоненты
Таблицы стилей CSS и SCSS
Это один из самых..
Динамические настраиваемые текстовые компоненты со стилевыми компонентами
До недавнего времени при работе со стилизованными компонентами в моих приложениях React Native я определял все свои текстовые компоненты для каждой необходимой конфигурации в одном файле, например так:
Этот способ сделать это довольно громоздким, потому что:
вам нужно много писать. вам всегда нужно проверять, существует ли компонент с данной конфигурацией или нет (чтобы не добавлять дубликаты). когда вам нужно изменить конфигурацию, это может привести к неожиданным изменениям..
Быстрый совет: использование массивов в качестве конфигурации CSS и Immutable Reverse
По мере того, как становится все более и более распространенным формулировать наши стили с помощью Javascript, массивы могут быть полезной структурой данных для определения общих конфигураций тем, таких как размеры, цвета, точки останова и т. д.…
Например, я обычно устанавливаю один или несколько файлов конфигурации, которые выглядят примерно так:
/**
* styles/config.js
*/
export const scale = [
4, // Smallest
8,
16,
24,
32,
40, // Biggest
]
export const shadesOfGrey = [..
Вопросы по теме 'styled-components'
Компонент в стиле энзимного рендеринга с темой
Я использую react с styled-components и jest enzyme для своих тестов. У меня проблемы с тестированием тематического компонента, который постоянно выдает ошибку из-за theme из styled-components .
Мой компонент:
const Wrapper =...
1675 просмотров
schedule
14.01.2023
Использование @supports со стилями-компонентами
Я недавно перешел на использование компонентов стиля для своего стиля, и я был пытается заставить работать функцию @supports CSS, но безуспешно.
Синтаксис @supports используется примерно так:
@supports (display: grid) {
.Container {...
1886 просмотров
schedule
18.01.2023
Таргетинг на определенные классы CSS с помощью стилизованных компонентов
Как я могу стилизовать что-то вроде react-datepicker с помощью стилизованных компонентов? Библиотека datepicker выглядит так, как будто она использует какой-то тип стиля БЭМ (снимок экрана ниже), который я обычно просто использовал бы...
5678 просмотров
schedule
02.10.2022
Псевдоклассы до и после, используемые со стилями-компонентами
Как правильно применять псевдоклассы :before и :after к стилизованным компонентам?
Я знаю что ты можешь использовать
&:hover {}
для применения псевдокласса :hover к стилизованному компоненту.
Работает ли это для всех...
71903 просмотров
schedule
13.04.2023
MaterialUI вместе со стилями-компонентами, SSR
Я создаю новый проект с SSR, используя Next.js, MaterialUI и styled-components. Насколько мне известно, MaterialUI использует JSS в качестве инструмента для SSR (согласно example в своем репозитории). Интересно, знает ли кто-нибудь, как я могу...
1949 просмотров
schedule
08.12.2021
стилизованные компоненты заменены стилем thrid party (antd)
У меня есть простые стилизованные компоненты, которые применяются к компоненту antd:
import { Card } from 'antd';
export const UsageCard = styled(Card)`
box-shadow: 1px 1px;
padding: 2px;
`
Это создает div с атрибутом класса, который...
2516 просмотров
schedule
14.04.2022
Наведите указатель мыши на стилизованный компонент без оболочки
Итак, у меня есть это:
const Link = styled.a`
color: blue;
`;
<Wrapper>
<Link href="/">Hover Change</Link>
<Wrapper>
Я хочу наложить эффект наведения только на элемент Link, чтобы изменить цвет на белый....
10119 просмотров
schedule
12.03.2022
Можно ли заполнить цвет фона, чтобы не было белого? Я использую свойство css clip-path на этом снимке экрана.
https://imgur.com/a/ZTZp4
Codepen: https://codepen.io/yongelee/pen/eVobRd
Я хочу, чтобы фон не был белым, поэтому в основном это белое пространство является цветом фона следующего блока. Но, к сожалению, когда я обрезаю путь, div не...
5232 просмотров
schedule
02.11.2022
Как экспортировать стиль во внешнюю таблицу стилей в styled-components?
Я использую стилизованные компоненты в своем проекте, но он просто создает тег стиля в голове. Есть ли способ экспортировать эти стили во внешнюю таблицу стилей?
ПРИМЕЧАНИЕ. Я использую Webpack.
717 просмотров
schedule
13.03.2024
Добавьте переход к сворачиваемому div, используя стилизованные компоненты в React
Я пытаюсь создать простой складной div, используя стилизованные компоненты в реакции.
Я могу заставить div открываться и закрываться в зависимости от состояния, но я не могу заставить переход работать. Он просто прыгает, чтобы открыть или закрыть....
7095 просмотров
schedule
15.07.2022
Как передать переменные темы Styled-Component в компоненты?
В моем приложении React+StyledComponent у меня есть такой файл темы:
тема.js:
const colors = {
blacks: [
'#14161B',
'#2E2E34',
'#3E3E43',
],
};
const theme = {
colors,
};
export default theme;
В настоящее время я могу...
4099 просмотров
schedule
31.08.2022
Повторно использовать микс со стилизованными компонентами в разных файлах?
Как я могу повторно использовать коллекцию стилей со стилизованными компонентами в разных файлах?
С помощью SASS я могу определить и использовать миксин следующим образом:
@mixin section( $radius:4px ) {
border-radius: $radius;
background:...
8499 просмотров
schedule
30.06.2023
Как сделать адаптивную гибкость с помощью Styled System и Styled Components
Я пытаюсь разобраться с использованием Styled System с Стильные компоненты .
Я пытаюсь, чтобы flex вел себя отзывчиво (т. е. без flex на более низких точках останова). Но мне не везет.
Кто-нибудь знает, что я делаю неправильно?
import...
1130 просмотров
schedule
26.02.2023
react-jss не кеширует классы css
Я использую список Mui (material ui), а в ListItem у меня есть настраиваемый компонент, который немного сложен (имеет другие компоненты + состояния, может сворачиваться или расширяться и т. Д.).
Я использую response-jss (injectSheet (styles)...
238 просмотров
schedule
13.11.2022
Стилизованные компоненты в Reactjs
Как я могу применить свой код css в качестве стилизованного компонента в app.js? Как я могу преобразовать этот ".container> div" в стилизованный компонент и использовать его в моем app.js. После установки styled-component через npm install и...
368 просмотров
schedule
22.07.2022
Как определить className в стилизованных компонентах
Я занят рефакторингом проекта React для использования стилизованных компонентов. В настоящее время он использует SASS. Итак, у меня есть рабочий компонент:
import React from 'react';
import styled from 'styled-components';
const MainNavDiv =...
15776 просмотров
schedule
08.05.2023
Как создать компонент с динамическим стилем?
То, что я пытаюсь достичь, выглядит примерно так:
import styled from 'react-emotion'
const StyledComponent = styled(({tag}) => tag)`
// some css styles
`
И используйте его как:
<StyledComponent tag=div"/>
<StyledComponent...
3352 просмотров
schedule
13.09.2022
Сгенерированный снимок с компонентами в стиле jest, вышедшими из строя в разных средах
Я работаю над проектом, использующим стилизованные компоненты и шутку с тестированием моментальных снимков для первоначального рендеринга моих компонентов React. Я могу запускать эти тесты локально, при этом, как и ожидалось, создаются снимки. Все...
948 просмотров
schedule
17.09.2023
Сделать рендеринг SVG после загрузки CSS (стилизованные компоненты React)
Я создаю целевую страницу с помощью GatsbyJS и Styled-Components, где я хочу отображать логотип SVG в центре экрана.
После развертывания на сервере кажется, что при загрузке моей страницы SVG загружается первым и сразу отображается в верхнем левом...
798 просмотров
schedule
10.06.2024
Включить глобальную тематику с эмоциями?
Я подписался на https://github.com/emotion-js/emotion/issues/546 , в котором автор Emotion Кай упоминает решение, хотя я не совсем понимаю его.
Поэтому я сделал небольшой CodeSandBox , в котором реализованы детали, указанные в проблеме. Как я...
5230 просмотров
schedule
29.04.2022
