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

Best practice for Typescript and styled.div<Props>((props: Props) => { ... })

Hi all. Is this the expected way to type your props in typescript to get a theme to pass through? I'm not seeing much typescript documentation on styled-components.com so if someone can provide a resource for this type of stuff would love that!

thumbsup
1
message-simple
0

Transitions not working

I have a list of elements I need to pass a CSS variable to thats why I created this setup (for each list item) it seems to cause it to recreate the html elements completely, so that the transition doesnt trigger. Id just like to hotswap the css variables...

thumbsup
0
message-simple
2

App Bundle Size

Hey guys, So I'm am trying to use styled-components inside an ejected create-react-app, and the issue I run into is my apps bundle size with styled components. Which form some reason takes up almost 800 kb for just a few pages, I would really appreciate if someone could help me…

thumbsup
0
message-simple
3

I tried to use &:first-letter but it doesn't seem to work

Any idea why? The project uses styled-components 5.2.0 I also tried &::first-letter and &&:first-letter

thumbsup
0
message-simple
3

Extending a Styled Component

I am running v5 of Styled Components and am having some issues extending a styled component. I will show the code below. I have a Heading component which returns a React.FC containing a StyledHeading. Then, in a different file, I am trying to extend Heading. However, when doing…

thumbsup
0
message-simple
1

Gatsby app is not able to consume my component library with style-components.

I have a React component library (lib) that's built with styled components. I have another app built on Gatsby (app) that is consuming lib. When the app runs, none of the styles defined in my lib are appearing. The same lib is working fine when consumed by a CRA app or a Next.js…

thumbsup
0
message-simple
0

ThemeProvider does not pass theme prop to reactstrap tooltip

Hey everyone, I am trying to use a styled-component inside the reactstrap tooltip, but the theme prop is not present there. The app is encapsulated using the ThemeProvider component to pass the theme across the app to all styled-components. Anything that I am missing here ?

thumbsup
0
message-simple
1

How do I type the return value of the css helper function in TypeScript?

👋 I am trying to do a very simple thing: have a function that returns csscolor: someCustomColor``. What would the return type of that function be? Is FlattenSimpleInterpolation the only type css helper returns? Or should I account for other types?

thumbsup
1
message-simple
2

Extending Styles

Hi! I have a Styled Component called Title that includes three sub-components (Title1, Title2, Title3). When importing Title into another React Component (News), I want Title to be all the same, except for an alignment in Title2. How can I make this change without having to…

thumbsup
0
message-simple
0

React-bootstrap 4 components rendered without proper style when customized

If I customize react-bootstrap 4 form component it don't use bootstrap styles Example: https://codesandbox.io/s/styled-components-forked-0qkgs?file=/index.js

thumbsup
0
message-simple
0