Posts
Members
Info
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…
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…
0
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…
1
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: …
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…
0
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…
0
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…
1
passing nested color object as prop not working
I have colors in my theme.js as below - colors: { gray: '#f2f2f2', …
1