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

Thing.extend`` vs. styled(Thing)``

October 3, 2017 at 3:07pm

Thing.extend`` vs. styled(Thing)``

October 3, 2017 at 3:07pm (Edited 3 years ago)
Since the introduction of .extend I have struggled to understand when I should use one vs. the other.
I use to use to do this quite often:
Can someone help me understand the difference in usage, what is recommended, etc?

October 3, 2017 at 4:34pm
For what I use, and if it is well what is the first case it creates a stateless component or it will create you a div with the following styles. The second case, you are giving styles to an existed or previously created component. Imagine the following case I have a class component and I want to give styles I can use the extend for this not forgetting to pass className in the props.
  • reply
  • like
in my opinion i like to use the second example gives me that feel of making styles like css file.
  • reply
  • like

October 19, 2017 at 10:07am
We have some more documentation arounds this coming to the website hopefully soon since lots of folks are confused, but here's the TL;DR:
  • reply
  • like
Always use styled(Thing), only use Thing.extend if "Thing" is defined in the same file. (i.e. if you're sure it's a styled component)
like-fill
11
  • reply
  • like
Does that help? ☺️
  • reply
  • like

October 19, 2017 at 7:33pm
Hey Max, cheers for stepping in here! That's cool, it's pretty much the conclusion I got too as well so I'm glad I went in the right direction. It just didn't feel right to call `.extend` across file boundaries.
like-fill
2
  • reply
  • like
Will be great to see a bit more guidance from you guys though.
like-fill
2
  • reply
  • like

October 22, 2017 at 5:27pm
Question. Do you have to eject CRA in order to get babel-plugin-styled-components going?
  • reply
  • like

October 29, 2017 at 2:06am
Hey Max, can you explain the reasoning behind the TLDR - I want to make sure that I am following the logic as well?
  • reply
  • like
My understanding from the docs was that `extend` should be used when modifying for one-off prop/style changes? Otherwise, I was using `styled(Thing)` if I was majorly extending the style. They seem to both kinda do what `composes` did in CSS Modules but I am not sure if that is an accurate way of thinking about it.
  • reply
  • like
But then there is this part in the docs which is confusing: "This is different from passing your styled component into the styled() factory. Calling extend creates a new stylesheet by extending the old one, and thus doesn't generate two classes for a single component.
  • reply
  • like
which makes me wonder if styled doesn't add new classes - and what are the implications of that?
  • reply
  • like
Additionally, the docs example seems to be similar for both cases which makes it a little confusing (atleast in my case).
  • reply
  • like
Yeah we really need to clean that whole part up to be honest. The reason .extends exists is because it merges the previous class and the new class into a single class, where styled(Thing) attaches two classes.
  • reply
  • like
const Bla = styled.div`
background: red;
`
Bla.extend`
color: blue;
`
// What you'll see in the DOM:
<div class="sc-asdf123 asdf123" />
styled(Bla)`
color: blue;
`
// What you'll see in the DOM:
<div class="sc-asdf123 asdf123 sc-btw123 btw123" />
like-fill
1
  • reply
  • like
extend is basically an automatic ‘mixin’ right?
  • reply
  • like
Kind of, yeah, though css`` would be more like a true "mixin"
  • reply
  • like
(in the Sass sense of the word mixin)
  • reply
  • like
extend/styled(Bla) is more like compose in CSS modules
  • reply
  • like
Feels to me like styled(Bla) is exactly like composes in css modules as it gives me a composition of 2 classes.
  • reply
  • like
Ok the other hand extend to me seems like it automatically does what I would have done this way:
  • reply
  • like
const styles = css’color: blue’;
  • reply
  • like
const MyComp = styled.div’${styles}; ....’
  • reply
  • like
Yes, the difference being that for .extend to work you have to already have a component that looks that way
  • reply
  • like
Show more messages