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

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

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

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

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

Hi! Are there any active maintainers for the jest-styled-components repo?

There seem to be quite a few open issues and even pull requests (all ready to go). I've opened a bug w/ a fix here: https://github.com/styled-components/jest-styled-components/issues/344

thumbsup
0
message-simple
0

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

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

React Testing Library, getByRole and media queries

When running tests that use the RTL getByRole query, elements that are hidden by default but have a media query to make them visible do not get included unless I explicitly tell RTL to include hidden elements, even though the jest screen size when running tests would trigger the…

thumbsup
0
message-simple
0

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