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

Performance during hydration

I have a gatsby site that uses Styled Components. During page load, hydration takes a long time. I can see many, many calls to generateAndInjectStyles in the flame chart in dev tools. Is this expected? The styles are already present in the page (from SSR). I would expect that…

thumbsup
1
message-simple
1

prettier auto-formatting for "css helper" functions not working

Using prettier with eslint as my auto-formatting/linter but formatting isn't working for css helper functions e.g won't get formatted. however, preprending styled.someRandomMethodfont-size:2px;margin:blah;` does format it …

thumbsup
0
message-simple
1

Is there a way to pass padding or margin dynamically through props?

I understand I can just do something like: and apply that to a margin right ternary but how can I go about applying shorthands like ma={'25', '25', '25', 25',} …

thumbsup
0
message-simple
4

Extending components conditioned by media query

Hi there! Just wondering if the following example is doable with styled-components: I have 2 heading components: 1. Heading1 — Renders with font-size: 48px …

thumbsup
0
message-simple
0

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

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

is there any open source apps thats written in typescript, styled-components?

In my project, i am using typescript, react, styled-components. But I am new to styled-components, i would like to know if there any open source projects, blogs are available for reference.

thumbsup
0
message-simple
0

Has anyone got HMR working with Vitejs?

I get a full page reload every time I edit a styled component vs HMR as would be expected when using it in combination with Vitejs.

thumbsup
0
message-simple
0

How can I use different properties for the same component

for the same component, at few places I want to use : border while at other places I want to use border-bottom Also can anyone tell me what does this code means : color: ${prop('theme.color.blue', '#0F0F3A')};

thumbsup
0
message-simple
1

react-native animation scale

Hi How can i do this type of animation with styled component ?? const animation = { y: startValue.interpolate({ …

thumbsup
0
message-simple
0