menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team
Posts
Members
Info

Conditional Check for Prop Value that Is NOT a String

I have a prop that is being passed a function like this: <Icon name={Facebook} /> Facebook is a reference to another component being brought in by react-icons. …

thumbsup
0
message-simple
2

Error when using npm link to test my module which uses styled-components. It…

I have created a npm module (created with nwb) where I use styled-components. In my consuming app, I'm also using styled-components. The problem is. Everything works fine when installing my module via npm install. However, when using npm link the following error message occurs…

thumbsup
0
message-simple
6

Jest snapshots failing in CI because of added vendor prefixes

Hello everybody 👋 I have some Jest snapshots that work totally fine locally but fail in our CI pipeline: When I run these tests locally, the snapshots do not include vendor prefixes, but when running them in our CI server, they do: …

thumbsup
1
message-simple
7

Tailwind vs Styled Components

I’ve used emotion/styled and SC for a while. I see a lot of hype around tailwind css and similar atomic css libraries. It looks like you could use SC and TW together, but you’d likely want most of your code in TW if you decided it was the better approach. What are people’s…

thumbsup
0
message-simple
2

Is there any problem with this part of the docs?

Check this section in the doc: https://www.styled-components.com/docs/basics#animations Is the static prop (type) ever passed down to the component? Or there is a typo here? I don't see it making any different to the rendered component.

thumbsup
0
message-simple
1

Trialing style-components but it is breaking tests

I have started refactoring a portion of the codebase where I work to demonstrate the potential of styled-components. However our tests are failing unless they are wrapped inside a ThemeProvider. Is there anyway to avoid having to do this? Does storing the theme inside of context…

thumbsup
0
message-simple
1

Injecting helpers into the theme

Hi guys. I am looking for a way to inject helper/mixin functions into the styled-components theme, to be avalable in various components as they create styled components. I can, of course, do this: …

thumbsup
0
message-simple
10

Typescript + Material UI Questions

Anyone here using @material-ui/system and styled-components together? I keep getting an error on the styled.div<StyledBoxProps> line saying "Operator '>' cannot be applied to types 'boolean' and 'string'." Example:

thumbsup
0
message-simple
0

Targeting Siblings (Checkbox)

Hello, I have a problem with targeting the sibling of a check input. The Checkbox should look like a button, so I want the appearance of the "Name" to change when checked: This does not work, what am I doing wrong? I also tried to select the Checkbox in Name like this:

thumbsup
0
message-simple
2

hearty hello from Slovakia in the middle of the night!

thumbsup
0
message-simple
1