menu
up-caret
down-caret

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

# General

General chat

Trending conversations
Generating 200+ class names...
@tbhesswebber · 31d
How do you lint styled-components?
@boris-da-web-dev · 37d
Why is "as" breaking my styles?
@donifer · 23h
Best practice for reusing colours and fonts
@elie · 18h
Confused by the attrs method
@davidohlin · 3d
Show previous messages

February 15, 2019 at 3:56am

Is there a way to have a styled component generate classes for dynamic prop rules, rather than a new class for each combination of dynamic rules? I could have 7 classes(5 background image urls, 2 opacity states) and either 100 classes or inline style for background-position (icon spritesheet). All in one styled-component style it'd generate 200 classes(once all icons have toggled their opacity state).

I'm sure this can be a common issue to run into and get much worse? In addition to all static CSS rules/props being duplicated for each of those classes. Seems a bit silly if the solution is to inline dynamic props via attr(or directly on the component)? Especially when it's a dynamic prop that isn't going to be updating frequently(in this case the only rule that changes on the element is it's opacity toggle, but the background-position is what would create the most classes, combinations with opacity aside).

  • reply
  • like

February 19, 2019 at 1:40pm

Is there a way to have a styled component generate classes for dynamic prop rules, rather than a new class for each combination of dynamic rules? I could have 7 classes(5 background image urls, 2 opacity states) and either 100 classes or inline style for background-position (icon spritesheet). All in one styled-component style it'd generate 200 classes(once all icons have toggled their opacity state).

I'm sure this can be a common issue to run into and get much worse? In addition to all static CSS rules/props being duplicated for each of those classes. Seems a bit silly if the solution is to inline dynamic props via attr(or directly on the component)? Especially when it's a dynamic prop that isn't going to be updating frequently(in this case the only rule that changes on the element is it's opacity toggle, but the background-position is what would create the most classes, combinations with opacity aside).

Can you not mathematically generate a cartesian coordinate system so that you can create static class names and also statically apply them to your components? For example, a class of x0y0 would be at (0, 0)

  • reply
  • like

February 20, 2019 at 5:27pm

nevermind. Got it.

  • reply
  • like

February 25, 2019 at 12:40pm

Is there anyone else having trouble with styled-components 4.1.3 and hot-reloading dev builds? The CSS is missing large parts, and when I rollback to 4.1.2 it works just fine

  • reply
  • like

February 28, 2019 at 1:39pm

is anybody looking at using hooks for s-c? As I understand it, that would remove the two wrapping context helper elements from the tree.

  • reply
  • like

March 1, 2019 at 2:18pm

Hi all, just wondered if there's anybody else here who could chip in on a question I asked about the performance of styled components in a large application? I posted it in the help forum but it quickly disappeared and I don't think many people have seen it.

https://spectrum.chat/?t=b3d905df-f41d-4b46-bef1-cf625839f669

  • reply
  • like

March 4, 2019 at 6:21pm

March 17, 2019 at 4:11am

hello i am having a problem. i have 2 buttons and they are automatically getting stacked on top of each other and the widths are expanding to fit the size of the grid space. does anyone have an idea of what i am doing wrong?

  • reply
  • like

hello i am having a problem. i have 2 buttons and they are automatically getting stacked on top of each other and the widths are expanding to fit the size of the grid space. does anyone have an idea of what i am doing wrong?

Grid's default behavior is to stretch items assigned to a grid-area. Are you explicitly assigning the items to an area or to a grid-row and grid-column?

  • reply
  • like

March 18, 2019 at 6:43am

@tbhesswebber question, when I use grid do I also need to specify media queries?

  • reply
  • like

thanks

  • reply
  • like

@tbhesswebber question, when I use grid do I also need to specify media queries?

If you're using grid to structure elements and you want that grid to dynamically change based on screen size or some other media query, yes.

  • reply
  • like

March 20, 2019 at 11:20pm

@mxstbr How can we do Nesting selector in react-Native ?

  • reply
  • like

I have styled(View) and "sometimes" this view render Text.

So I would like to customizer this Text

  • reply
  • like

I tried

styled(View)${Text} { ... }

but it doesn"t work

  • reply
  • like

March 21, 2019 at 1:06pm

@steffi Shouldn't be supported as it's not supported by react-native as far as I know.

Edited
  • reply
  • like

March 22, 2019 at 4:31am

Does styled components 4 set some sort of like reset/normalize or anything by default?

  • reply
  • like

Hmm weird then. I updated from 3.x to 4.x and added a reset and it broke like 100vh so I had footer stuck to bottom of screen if content wasn't long enough and after the update it doesn't anymore. Removed the reset and same situation still not does my background image fit either lol. But css itself didn't change. Back to the Dev tools I guess

  • reply
  • like

Hmm not sure what's up with that. How are you including the reset?

  • reply
  • like

The way they say to in the docs. It's the styled-reset package. Included into my global

  • reply
  • like

If I remove the rest the same result though that's why I had asked about if s-c included any sort of defaults

  • reply
  • like

Elie just posted a new thread 📝

Best practice for reusing colours and fonts

thumbsup
0
message-simple
4

  • reply
  • like