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
Chat
Members
Info
down-caret

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

Variant Theming Library

Hey team, looking for some feedback on a variant theming library that I've created to support the many variants that my current company needs. Was really hoping that it would read a lot cleaner and remove a lot of the bloat that we see with current implementations of variant…

thumbsup
0
message-simple
0

how to use bootstrap css in styled components

how to customize bootstrap nav bar and grid

thumbsup
0
message-simple
0

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

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

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 disable vendor prefix in styled-component?

thumbsup
1
message-simple
3

Forwarding defaultProps

I can't seem to find any issue around this but is there a reason that styled-components doesn't forward the defaultProps from a wrapped component? For example: This messes up PropType checking since propTypes are forwarded. Seems to be a new thinking v4.

thumbsup
0
message-simple
0

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

I have styled-components 4.2.0, I can't seem to add a custom attribute

Previously this worked: const CompNumber = styled.div.attrs({ 'test-id': 'data-chart-comp-number', …

thumbsup
0
message-simple
3