Questions tagged [styled-system]
26 questions
5
votes
2 answers
How to fix 'Types of property 'color' are incompatible' on Box component using typescript and emotion
I'm attempting to make a general Box react component on a new project. This will be the base of all other components. I'm using styled-system, emotion, and eventually theme-ui to handle themeing and styling of all my components.
My root Box…
Corey Bruyere
- 786
- 1
- 10
- 21
2
votes
1 answer
How to output a list of icons in storybook with styled-icons
Currently I am adding icons manually, but for a couple of icons this way is not problematic. But in case of 100 icons it becomes a really problem. How can I make this reusable. So I can apply this element so it can be any icon I want. In the end it…
user13914915
1
vote
1 answer
Is it possible to override the theme sizes of NativeBase to obtain rem units?
I'm new to NativeBase and I'm overriding the default theme to obtain a custom one where I would like to use rem units. I'm using the extendTheme function as described in the docs:
const myCustomTheme = extendTheme({
sizes: {
0: 0,
1: 16,
…
fcole90
- 71
- 2
- 9
1
vote
1 answer
How combine styled-system with react material?
I wanna use styled-system in my project which is the admin panel. I built project basing on React Material and I have a lot of different forms with inputs, selects, checkboxes and so on. In many places I have to set some margins/paddings for…
eugenedrvnk
- 408
- 1
- 5
- 10
1
vote
1 answer
Access values from theme with React Styled System
In my React project I am using Emotion and Styled System for my Design System and styling.
In theme.js I have some values (to create a responsive CSS Grid):
template: {
xs: {
rows: 'auto',
columns: 'auto',
},
sm: {
…
meez
- 3,783
- 5
- 37
- 91
1
vote
1 answer
Type 'CssFunctionReturnType' is not assignable to type 'InterpolationFunction'.ts(2769)
Recently, I am getting an error every time I try to use the css function from styled system.
It was working perfectly before without any erros. No i keep getting the error:
Type 'CssFunctionReturnType' is not assignable to type…
EdwinS95
- 138
- 11
1
vote
2 answers
How to use styled-system responsive props
Can I use the styled-system to achieve something like this?
zok
- 6,065
- 10
- 43
- 65
0
votes
1 answer
How can I edit the styling of a Stripe Card element placeholder using styled components?
I have inherited a codebase where I am supposed to update the styling. Stripe Card elements are being styled using styled components and styled system. I am trying to edit the styling of the placeholder but I am having a hard time figuring out how.…
Margarita Marmaridou
- 43
- 4
0
votes
0 answers
Pseudo classes in styled-system?
Styled-system is a pretty popular styling framework. But nowhere in the docs they mention how to apply pseudo classes like :hover.
How would I style a simple button with a hover effect?
Xen_mar
- 8,330
- 11
- 51
- 74
0
votes
0 answers
Override existing styles using styled system
I have this existing UI components has built with styled-component.(https://styled-components.com/)
Now I want to overrides existing styles by using Styled System (https://styled-system.com/) so I can style with style props,
Here is what I did so…
Danny Kim
- 809
- 1
- 7
- 15
0
votes
0 answers
Chakra UI spacing not matching expected defaults for padding and margin
I'm working on converting my app from rebass to chakra and currently dealing with a component that needs 16px padding on mobile, and 24px padding on tablet/desktop. In my component I have
sss
- 618
- 1
- 8
- 20
0
votes
0 answers
How do I display the value of a theme object on the front end (e.g. #141414) vs the token name (e.g. bgPrimary)?
I've styled my website using a theme.js file utilizing emotion and styled-system and want to show the value (e.g #141414) on the front end vs the token name (e.g bgPrimary).
Obviously when I use the token in practice, my website's background is the…
0
votes
1 answer
Typescript + Styled-Components + Styled-System: No overload matches this call
so I get the famous "No overload matches this call" error when using Typescript + Styled-Components + Styled-System.
The solutions I found so far require me to pass a generic type/interface to the styled component. Which I do with the ButtonProps.…
codelifter
- 218
- 5
- 14
0
votes
3 answers
How can I add aliases to an array of numbers in typescript
I'm trying to add some aliases to an array of numbers but typescript wont accept it, here is the code:
interface FontSizeAliases {
micro: number
small: number
default: number
large: number
}
const fontSizes: number[] & FontSizeAliases =…
Yousef jalali
- 63
- 1
- 2
- 5
0
votes
1 answer
Why I can't see props in intellisense when using styled-system with styled components?
So, first of all, I declare my component like this:
import styled from 'styled-components';
import {
space, color, layout, flexbox, border,
} from 'styled-system';
const FlexWrapper = styled.div`
display: flex;
gap: ${({ gap }) => gap…
Kirill Kazakov
- 27
- 4