menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

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

Channels
Team

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

October 3, 2017 at 3:07pm

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

October 3, 2017 at 3:07pm (Edited 5 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.
in my opinion i like to use the second example gives me that feel of making styles like css file.

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:
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
Does that help? ☺️

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
Will be great to see a bit more guidance from you guys though.
like-fill
2

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

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?
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.
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.
which makes me wonder if styled doesn't add new classes - and what are the implications of that?
Additionally, the docs example seems to be similar for both cases which makes it a little confusing (atleast in my case).
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.
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
extend is basically an automatic ‘mixin’ right?
Kind of, yeah, though css`` would be more like a true "mixin"
(in the Sass sense of the word mixin)
extend/styled(Bla) is more like compose in CSS modules
Feels to me like styled(Bla) is exactly like composes in css modules as it gives me a composition of 2 classes.
Ok the other hand extend to me seems like it automatically does what I would have done this way:
const styles = css’color: blue’;
const MyComp = styled.div’${styles}; ....’
Yes, the difference being that for .extend to work you have to already have a component that looks that way
Show more messages