menu

styled-components

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

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
Team
Posts
Members
Info

Can RGBA backgrounds be used with styled-components?

I've just started using styled components and `background: rgba(0,0,0, 1)` doesn't seem to be working. Is this a limitation of styled-components or should it be written a specific way?

thumbsup
0
message-simple
3

Responsive behaviour on react-native

I have been trying to find a way of having responsive sizes, and of adding/removing content from the screen depending on the size. In react-native media queries do not exist, neither em/rem for sizes, anyone can share their experience?

thumbsup
0
message-simple
0

Omitting ampersands in pseudo-classes and pseudo-elements

Hi all, I've been using styled-components omitting ampersands in pseudo-classes (such as :hover) and pseudo-elements (such as :before) because I found it works. For example, to style a hover state of a component, I can just write :hover instead of &:hover. I guess it works…

thumbsup
0
message-simple
2

How to pass props to children components that only use the props for styling

Previously I was styling Components using styled-components, giving the parent element in the Component the className prop and all children their own classNames in order to do my styling. Children elements could easily use the props when styling because it had access to…

thumbsup
1
message-simple
3

how can I extend third party component's style?

Hi all, I am using styled-component to move accordion icon from left to right (react-accessible-accordion) I have extended styled(AccordionItemButton), but this is removing existing style of AccordionItemButton Can any one help me to fix this ?

thumbsup
0
message-simple
2

Problem with "toggling" CSS

I am trying to implement this simple animation with styled components, but I can't get the height transition working. Here's a link to Code Sandbox where you can find the current StyledComponents implementation. This is my code atm: isVisible is a boolean that simulates toggling…

thumbsup
0
message-simple
5

How can i use styled-theming with styled-system?

Can i make my styled-system theme to have a light and dark mode, like it's explained in the styled-system documentation.

thumbsup
0
message-simple
9

CSS Grid and prefixing?

I'm noticing that I'm not getting any vendor prefixes in IE11 for CSS Grid properties. I believe Styled Components is using autoprefixer under the hood and I think there are some configuration options that can be used with regard to Grid properties and how autoprefixer processes…

thumbsup
0
message-simple
1

How can I use a custom animation with the style object syntax?

I'm trying to write a custom animation using keyframes and the object syntax. If I use the tagged template syntax it works correctly, but with the style object syntax I get the error It seems you are interpolating a keyframe declaration (bRLPvk) into an untagged string. However,…

thumbsup
1
message-simple
11

React App with Styled Components -> Web Component

Hi! I have a React app using styled components. Now I am trying to wrap it in a web component and got it working - except the css. …

thumbsup
0
message-simple
2