menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-system

Style props for rapid UI development

Channels
Team
Posts
Members
Info
down-caret

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…

message-simple
0

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…

message-simple
0

Use array scales with themeGet

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

message-simple
1

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…

message-simple
0
·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…

message-simple
1

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…

message-simple
0

css object in variant

I'm wondering if it's possible to use css object in variant. Currently, when using css object it shows css with an error in its syntax. The following code I'm using to create styled-component It generates the following css …

message-simple
0

passing nested color object as prop not working

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

message-simple
1

React Native and styled-system/css

Is it possible to use styled-system/css with React Native and Styled Components? Any simple examples anywhere? I tried but wasn't able to make use of it... Cheers!

message-simple
0

Node of type atrule not supported as an inline style

I am trying to implement styled-system to my react native app . I want to use responsive style in my box. But I get warning "Node of type atrule not supported as an inline style" . // in theme …

message-simple
1