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

Using `babel-plugin-styled-components` as a published component library.

I'm making a component library in a separate npm package, when building it and publishing it, I've enabled the plugin babel-plugin-styled-components. When using it in my application project, the helper classes aren't there so I only get: class="sc-fzozJi sc-fznyAO bexLwb", but…

thumbsup
0
message-simple
7

Typescript and rest props

Hi, I'm trying to have a type for my ...restProps property but apparently the typescript's build in JSX.IntrinsicElements['button'] is not compatible with styled components and I'm wondering if there are any solutions to this problem. Above is my code but the TS compiler…

thumbsup
0
message-simple
5

Stop SC randomly generating classnames

I've seen instances where styled components can have classnames that aren't randomly generated, how do you do that?

thumbsup
0
message-simple
8

Prettier format issue

#Help const HeaderStyled = styled.divpadding: 8px; background-color: #DDD; cursor: pointer;; I'm using prettier for formatting but prettier converts #DDD to #ddd , how to avoid this?

thumbsup
0
message-simple
2

How to do one Info Tooltip?

Hey guys, Do you know how to do one Info Tooltip with svg icon in react? I tried this https://codesandbox.io/s/hover-test-reactjs-8cdkx, it goes fine, but in my project doesn't work the hover. The style "cursor: pointer" doesn't work too. And I need to show a message when mouse…

thumbsup
0
message-simple
0

Getting types error when trying implement animations

Hey guys. I don't know much about typescript so it's a bit tricky for me. The thing is that when i'm trying to add some animations in a component I get a types error …

thumbsup
0
message-simple
0

Error using styled-components/macro in create-react-app project

Hi all, I am getting the following error while using styled-components/macro in create-react-app project: And there is a runtime error with N.css is not a function. …

thumbsup
0
message-simple
0

It is possible to define constant or custom variable in styled component ? if…

It is CSS code :root { --custom-color: #f0f0f0; } to Defineany custom variable and we can use anywhere in css like given below without any writing any row color name p{ …

thumbsup
0
message-simple
1

Referencing other components (Not Working?)

Hey folks. This seemed pretty easy to do at the get go but for the life of me I can't figure out why it's not working. I'm trying to have my parent component change its :after properties when its child is focused. Sounds easy, right? Currently I have a component tree like…

thumbsup
0
message-simple
2

attrs className is adding classes to the end of the list

Hi, I would like to set up default className for my styled component using attrs({ className: "text-left" }) and then if I want to change that behaviour, for example adding new class to the end text-right, by using <Text className="text-right" />. I expected I would get…

thumbsup
0
message-simple
1