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

Use "as" prop with typescript

I'm currently building a pattern library in which I've built a Button component using React and styled-components. Based on the Button component, I want all my Links component to look exactly the same and receive exactly the same props. For that purpose, I'm using the as prop…

thumbsup
0
message-simple
4

How to style a `div` render as `button` using `as` prop?

How to style the Wrapper when used as button? I tried as below but didn't work

thumbsup
0
message-simple
2

Reusing classes when applying css as mixin

Hi all! I'm looking into composing styles in styled-components using a "mixin" approach. I created a quick sandbox to check if my mixin is being duplicated, or somehow extracted to a common class. …

thumbsup
1
message-simple
1

prettier messed up my styled component

How can I disabled this auto formatting?

thumbsup
0
message-simple
0

how to merge react-bootstrap element with styled-components element?

my styled-components element looks like this: const ContentContainer = styled.divtext-align: left; background: ${({ theme }) => theme.content}; I want to combine that element with CardColumns from react-bootstrap. …

thumbsup
0
message-simple
9

Is passing an array to the css prop supported?

Hey peeps! Have only just noticed that styled-components supports a css prop (https://styled-components.com/docs/api#css-prop), similar to Emotion. Emotion also supports style composition by passing in an array to the css prop. (https://emotion.sh/docs/composition) I've tried…

thumbsup
1
message-simple
0

Hi guys. I need your help.

I have this function for break points. And typescript have this error Property 'lg' does not exist on type '{}'. TS2339 sandbox

thumbsup
1
message-simple
10