Описание тега styled-components
NoneStyled-components - это библиотека JavaScript для стилизации приложений React. Он удаляет сопоставление между стилями и компонентами и позволяет вам писать фактический CSS, дополненный JavaScript.
1
ответ
Есть ли способ сделать относительную (в процентах или rem) высоту строки в styleled-компонентах?
Стилизованные компоненты утверждают, что охватывают все CSS, но я столкнулся с этой простой, но важной проблемой. Мне нужно увеличить высоту строки, но относительным образом, иначе линия обрезается (ее высота меньше букв). Когда я пытаюсь использова…
31 мар '18 в 01:12
2
ответа
Стилизация делает NavLink "неуправляемым" в реакции
Я пытаюсь стилизовать navbar-реактив-дом-навигацию NavLink. Я сделал это несколькими разными способами, но в любом случае, какой бы путь я ни выбрал, NavLink станет "не щелкающим" - это будет красиво оформленное поле, которое не будет перемещаться п…
23 июл '17 в 14:50
1
ответ
Доступ к ссылке на компонент передается как реквизит?
Я передаю стилизованный компонент const Text = styled.span` font-size: 10px ` render(){ <Test comp = {<Text innerRef={(ref)=>{this.ref=ref}}>Hello</Text>}/> } Внутри Test компонент, который я хочу получить доступ к ref из Text н…
20 авг '18 в 19:14
1
ответ
Несколько вложенных компонентов в стилизованных компонентах
Я довольно новичок в Styled Components (пришедший из SCSS), хотя в целом я понимаю его суть. Мне было интересно, есть ли способ консолидировать код ниже. Хотя это работает, это часто повторяется. Есть ли способ использовать несколько вложенных селек…
04 мар '18 в 13:03
1
ответ
Кнопка с горизонтальным эффектом затвора и стилизованными компонентами
Я хотел бы создать кнопку с горизонтальным эффектом затвора, как тот, который связан. Я попытался скопировать биты из вышеупомянутых ссылок, но не смог добиться эффекта... как мне этого добиться? export const Button = styled.button` background-color…
13 ноя '18 в 20:17
1
ответ
Невозможно редактировать стили в Chrome?
Так как я реализовал рендеринг на стороне сервера и управление стилями с styled-componentsЯ не могу редактировать стили в Chrome Dev Tools. Стили в devtools выделяются курсивом, и нет никакого флажка, чтобы выключать / включать указанный стиль. Это …
30 сен '18 в 23:32
2
ответа
Как получить refs.value в стиле React компонента?
Я хочу получить ref значение ввода, без стилизованного компонента: <form role='form' method='POST' onSubmit= {::this.onSubmit}> <input id='name' type='text' ref='name' name='name' required/> <button> Register</button></for…
27 авг '18 в 19:03
2
ответа
Использование переменных Javascript с styleled-компонентами
Я использую styled-компоненты для сборки своих компонентов. Все свойства стиля, которые принимают пользовательские значения, повторно используются во всех моих компонентах (как и должно быть). Имея это в виду, я бы хотел использовать какие-то глобал…
19 апр '17 в 17:51
0
ответов
Styled-компоненты style не обновляются, если компоненты вложены
Styled-компоненты не обновляются, если компоненты вложены. Например. 【НЕ ОБНОВЛЯЕТСЯ!!!!】 class Hoge extends Component{ constructor(props) { super(props) this.state = { active: false } this.handleToggleActive = this.handleToggleActive.bind(this) } h…
28 мар '18 в 05:42
1
ответ
Компоненты в стиле: Как я могу вращать значок SVG при нажатии?
const IconButtonWrapper = styled((props: IconWrapperProps) => { return <IconButton {...props} />; })` float: right; transform: rotate(0deg); overflow: hidden; transition: all 0.3s ease-out; ${(props) => props.rotate && css` trans…
02 дек '18 в 05:24
8
ответов
Оператор if внутри стилизованного компонента
export enum SizeEnum { Small, Large } export interface ICheckbox { Size: SizeEnum; } const Box = styled.div` height: 20px; width: 20px; ` В приведенном выше коде я хочу иметь возможность условно изменить значение высоты и ширины <Box> основанн…
10 апр '18 в 05:00
3
ответа
Ошибка CSS Проверка стилизованных компонентов в VS Code
Мне было интересно, если есть решение (плагин, пакет и т. Д.), Чтобы получить реальную проверку ошибок CSS в коде VS, при использовании стилизованных компонентов. Изменить, чтобы уточнить: Пример кода ниже является ошибкой (я знаю это), но я хотел б…
13 авг '18 в 08:00
1
ответ
Переопределить импортированные CSS-свойства styleled-компонента
У меня есть компоненты CheckBox и Label . При использовании компонента Label внутри компонента CheckBox я хотел бы добавить дополнительное поле для метки. Это возможно через styled()? Консольный выход Похоже, что вы обернули styled() вокруг компонен…
24 окт '18 в 20:33
2
ответа
Управляйте svg кругами для создания анимации вращения вокруг центра
У меня есть загрузчик (спиннер), нарисованный на странице через два <circle />, Необходимо вращать оба пути в разных направлениях с центром в начале координат, поэтому круги вращаются вокруг центра SVG и не переводятся, скажем так. Попытка ожи…
10 янв '19 в 20:40
1
ответ
Стилизованные компоненты - почему положение опоры влияет на стиль?
Я использую styled-компоненты для стилизации родительского и дочернего элемента в компоненте: function StyledDemo({ name, light, ...props }) { return ( <Parent {...props}> <Child>{name}</Child> </Parent> ); } у меня есть ligh…
20 мар '17 в 00:00
0
ответов
Как выровнять элементы справа и рядом друг с другом, используя flex?
В моем компоненте PageHeader у меня есть 2 компонента, которые составляют заголовок: пользовательский компонент и содержимое заголовка портала из компонента Flexstuff: <Container> <Flex direction="row"> <Flex pl={[0, 18]} width={[1, '…
02 фев '19 в 05:26
1
ответ
Понимание того, как подходить к стилю в React
Я новичок в изучении React. В качестве следующего этапа моего обучения мне нужно научиться стилизовать React. Исходя из предыдущего опыта, я должен предпринять следующие шаги для стилизации приложения React: Добавить Сброс CSS Внедрить грид-систему …
14 июн '17 в 14:36
1
ответ
Могу ли я создать компоненты на основе классов в стиле React?
Я только начал изучать использование стилевых компонентов для веб-приложения JavaScript React, и мне интересно, возможно ли использовать стилевые компоненты на основе классов. Например: Функциональный (работает): import styled from 'styled-component…
26 дек '18 в 02:15
0
ответов
Есть ли у styled-components интерфейс для функций в литерале шаблона?
Я новичок в Typescript, я не могу понять это: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-components/index.d.ts Я пытаюсь выяснить, есть ли уже определенный тип для функций внутри литерала шаблона в styled-components.…
14 фев '19 в 19:14
3
ответа
Как создать динамический стиль компонента?
Я пытаюсь добиться чего-то вроде этого: import styled from 'react-emotion' const StyledComponent = styled(({tag}) => tag)` // some css styles ` И используйте это как: <StyledComponent tag=div"/> <StyledComponent tag="p"/> <StyledCo…
21 июн '18 в 06:02