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

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

Best practices for implementing empty space

Hello! I thought about my reasons for using empty space with styled comonents the way I do, and I wrote this article: https://blog.bam.tech/developer-news/standardising-empty-space-in-jsx-with-styled-components Do you agree? Looking forward to your feedback!

thumbsup
0
message-simple
0

when using styled-components and semantic-ui-react, prop types missing?

Problem is quite visible here: https://codesandbox.io/embed/goofy-drake-rnh6v?file=/src/App.tsx Basically, if you style a semantic-ui-react Button, you'll get a component which is missing type definitions for ButtonProps (e.g. "size" in the example...). If you do the same thing…

thumbsup
0
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

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

How can I stop styled-components from passing some props to the DOM?

I am using styled-system to add some responsiveness props like this to my styled components: display={{ xs: "none", sm: "block" }} But styled components passes the display prop to the DOM, so the rendered component has this attribute: …

thumbsup
0
message-simple
5

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

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

Styled-components break react controlled forms using hooks

I built a functional hooks component and used styled-components instead of a styles.css file. However every time I did a key press in an input field, focus was lost. After much investigation, I discovered that by reverting back to the styles.css file and abandoning…

thumbsup
0
message-simple
2

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