Comments (10)
I came into the same confusion after trying out .attrs()
but after messing around with it for a while it's pretty clear what is its purpose and how does it work.
Consider this example:
const Div = styled.div.attrs({
color: 'red'
})`
color: ${props => props.color};
`;
Div.defaultProps = {
color: 'green'
};
...
<Div color="blue" />
So what happens here is (step by step):
Div
has been used withcolor
prop with valueblue
Div
has a default propcolor
with valuegreen
, but it is overridden by thecolor
prop passed in<Div color="blue" />
- Incoming props (passed explicitly or from
defaultProps
) arrive in theattrs
function and get merged with the object passed toattrs
- where what has been passed toattrs
takes precedence (so the valuered
is being taken) - Computed props are being passed to the interpolations and the
div
is going to be rendered withcolor: red
So knowing the above I think we can deduce few hints:
- Use
attrs
to specify immutable static props - Use
attrs
to compute other props based on incoming props (passed explicitly or from defaultProps)
So replacing defaultProps
with attrs
makes only sense, when you want the component to ALWAYS have some prop, because doing something like:
// replaced defaultProps with attrs based on example above
const Div = styled.div.attrs(props => ({
color: props.color || 'green'
}))`
color: ${props => props.color};
`;
doesn't make any sense.
If my description is wrong please correct me @kitten
from styled-components-website.
I'm regrouping some info from 2258. I still see a lot of confusion around attrs
in the issues.
Here is what happens under the hood since 4.1.2
from styled-components-website.
@georgesboris they're definitely two different approaches to a very similar problem. So, just leave it here and don't edit it out :) It's nice to have some "btw mentions" in some issues.
For the attrs
method, it would be good if we'd just state what it does in detail:
- it'll be merged with the incoming props
- they'll be available in interpolations
- they'll be have like normal props, so will also be passed on to the target / wrapped component
We should then maybe add a note that says: "Since we don't filter these props, they can trigger warnings when they're added onto DOM element targets."
This though is a general problem we're facing, not a documentation problem. And I'd like to add here to clarify that we'll probably solve it by waiting for React to (hopefully / eventually) implement prop namespaces :)
from styled-components-website.
That is correct @sarneeh. I'd love for you to rewrite that doc a bit explaining this more clearly! 🙏 Want to submit a PR?
from styled-components-website.
With a props functionality tons of compositions would be possible.
Can you show an example? How would that enable composition?
from styled-components-website.
@mxstbr actually... I'll retract myself. The compositions are already possible. I might be biased since I thought it worked one way and I sort of "got used to" it working that way.
I was basically using attrs|props
as I would use something from recompose
. I thought my code was easier to read as my computations were done outside my style declaration. BUT I know this can be achieved in the same way by creating functions externally and then using them on the style declarations.
// with imaginary props functionality
styled.props({
calculatedColor: ({ c1, c2, m }) => colorMath(c1, c2, m)
})`
background-color: ${props => props.calculatedColor};
box-shadow: 0 0 8rem ${props => props.calculatedColor};
`
// without it
const getCalculatedColor = memoize(
(props) => props.c1,
(props) => props.c2,
(props) => props.m
(c1, c2, m) => colorMath(c1, c2, m)
);
styled`
background-color: ${getCalculatedColor};
box-shadow: 0 0 8px ${getCalculatedColor};
`
But... the one using props would probably benefit from memoization anyway so maybe it's better the way it is now. Please disregard my PS as I only think the docs needs some work to make attrs
more clear. Would you like for me to edit the PS out?
from styled-components-website.
@kitten if I use defaultProps vs attrs, which one would trump if both have the same key/value? Why would you use attrs over defaultProps?
also, how do you use a prop for styling such as <Box flex="1 0 auto" />
without it throwing a warning?
from styled-components-website.
@lifeiscontent : I would also like to know the answer. I made a question: #266
from styled-components-website.
While indeed the props from attrs
take precedence before props passed to the component when we look at them in interpolation, things go weird and inconsistent when you look at html or do styled(...)
.
I've decided to create a separate issue describing my concerns: styled-components/styled-components#2372
from styled-components-website.
@mxstbr I'm sorry but I can't handle this right now as I'm completely out of time 😢
from styled-components-website.
Related Issues (20)
- Add FAQ on NextJS 13 usage HOT 2
- Add [project] by [company] to showcase HOT 1
- Need a FAQ page added for this HOT 3
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Wrong Link in the docs for v6 migration
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- On the homepage live edit example, the cursor is off by 1 character HOT 1
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase ok
- Inaccurate `shouldForwardProp` description
- Add dark theme to documentation HOT 2
- Add [https://themeselection.com/] by [Clevision] to showcase
- Add [https://themeselection.com/] by [Clevision] to showcase HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from styled-components-website.