styled-system

Style props for rapid UI development

https://styled-system.com

Channels

# All channels

Team

Posts

Members

Info

Anthony Olivence

·360d# General

Are responsive value objects supposed to remain in the DOM?

When using display with responsiveness like display={{ xs: 'none'; sm: 'inline' }}, should we always expect to see that in the dom, display:[object Object]. I think it's failing a RTL toBeVisible() test I wrote that expects to see none when the media query matches xs. The test…

Corey Bruyere

·1y# General

Unable to access `theme` inside of TS styled-system design system project

I have a React TS-based design system built with emotion, styled-system, and theme-ui and am encountering a TS error I can't seem to resolve. It seems like a simple fix, I just haven't been able to debug it... I'm seeing the issue in…

hainessss

·1y# General

Typescript autocomplete.

Has anyone got typescript autocompleting style props to work with styled system? For example, I would expect to see a list of justify-content values here (vscode intellisense): This is the basics of my type my setup: …

Mihai

·1y# General

Use array scales with themeGet

Using themeGet, I am trying to achieve this: But using array in themeGet don't work:

uptonking

·1y# General

which is better : themeGet(path,fallbackVal) vs props.theme.pName

Hello. I feel lost making the choice of the better way to get values from theme object. Using themeGet(path,fallbackVal) is ok, but it needs to import a new method themeGet. Using props.theme.pName is ok too. And it doesn't need extra imports. props.theme.pName || fallbackVal…

Tyler Caceres

·2y# General

Using Styled-System Theme Variables in a String

Hello, I was wondering if there was a way I could use my theme variables such as 'neutrals.0' , 'primary.8', etc in the string css properties. e.g: …

Tobi Kremer

·2y# General

Mixing grid layout and scaled spacing

I'm currently trying to get my head around the styled-system approach. Coming from design systems which utilize a classic column-based grid (e.g. Bootstrap) I have the feeling that this is somewhat opposed to specifying spacing (mostly margins) with the styled-system scale (by…

Shannen Smyth

·2y# General

How do you responsively style nested elements with styled-system?

I have a Text component which is a styled span and uses a variant to get the fontSize and lineHeight. <span>This is text <img src="exampleurl"/></span> I want to style the img tag that is inside the span responsively. I have included an example above of my component and attempt…

Francis

·2y# General

I can't seem to use the 'color' system with my Theme via jest

Github Question > https://github.com/styled-system/styled-system/issues/1635 Stackoverflow > https://stackoverflow.com/questions/64336614/using-react-test-renderer-w-styled-components-theme-react-native It looks like when testing my component i can't seem to get the color…

Dheeraj Mahra

·2y# General

styled-system

Are responsive value objects supposed to remain in the DOM?

When using display with responsiveness like display={{ xs: 'none'; sm: 'inline' }}, should we always expect to see that in the dom, display:[object Object]. I think it's failing a RTL toBeVisible() test I wrote that expects to see none when the media query matches xs. The test…

Unable to access `theme` inside of TS styled-system design system project

I have a React TS-based design system built with emotion, styled-system, and theme-ui and am encountering a TS error I can't seem to resolve. It seems like a simple fix, I just haven't been able to debug it... I'm seeing the issue in…

Typescript autocomplete.

Has anyone got typescript autocompleting style props to work with styled system? For example, I would expect to see a list of justify-content values here (vscode intellisense): This is the basics of my type my setup: …

Use array scales with themeGet

Using themeGet, I am trying to achieve this: But using array in themeGet don't work:

which is better : themeGet(path,fallbackVal) vs props.theme.pName

Hello. I feel lost making the choice of the better way to get values from theme object. Using themeGet(path,fallbackVal) is ok, but it needs to import a new method themeGet. Using props.theme.pName is ok too. And it doesn't need extra imports. props.theme.pName || fallbackVal…

Using Styled-System Theme Variables in a String

Hello, I was wondering if there was a way I could use my theme variables such as 'neutrals.0' , 'primary.8', etc in the string css properties. e.g: …

Mixing grid layout and scaled spacing

I'm currently trying to get my head around the styled-system approach. Coming from design systems which utilize a classic column-based grid (e.g. Bootstrap) I have the feeling that this is somewhat opposed to specifying spacing (mostly margins) with the styled-system scale (by…

How do you responsively style nested elements with styled-system?

I have a Text component which is a styled span and uses a variant to get the fontSize and lineHeight. <span>This is text <img src="exampleurl"/></span> I want to style the img tag that is inside the span responsively. I have included an example above of my component and attempt…

I can't seem to use the 'color' system with my Theme via jest

Github Question > https://github.com/styled-system/styled-system/issues/1635 Stackoverflow > https://stackoverflow.com/questions/64336614/using-react-test-renderer-w-styled-components-theme-react-native It looks like when testing my component i can't seem to get the color…

passing nested color object as prop not working

I have colors in my theme.js as below - colors: { gray: '#f2f2f2', …