Order of properties (eg. m & my) is not respected when using styled-components' .attrs
See original GitHub issueDescribe the bug
- I’m importing box from theme-ui.
- When I’m extending Box (from theme-ui) to create an atomic component, eg. a Button, I want to set default props. I use styled components
.attrs
to do that. attrs
overrides what’s inlined in the instantiated component.
To Reproduce https://codesandbox.io/s/fast-frost-j2quo?file=/src/App.js
Expected behavior
- In the example above I’d expect the vertical margin to be 100. Instead, it is 20.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
FAQs - styled-components
You can pass in attributes to styled components using attrs, but it is not always sensible to do so. ... The same goes...
Read more >styled-component .attrs - React does not recognize prop
Here's how you use them: const Comp = styled. div` color: ${props => props. $fg || 'black'}; `; render(<Comp $fg="red">I'm red!
Read more >[@types/styled-components] How do you use attrs ? #28597
Using custom props with Styled Components in Typescript. Custom props are props which are not valid HTML attributes of the element being styled...
Read more >Quick Start Guide to Attrs in Styled Components - Scalable CSS
Use Case 1: Defining Default Attributes. Here I've put together a simple button styled component: import styled from 'styled ...
Read more >Transient Props in styled-components | by Jake McCambley
Overview: Transient Props allow you to pass boolean value props to styled-components such that they do not render as an element's attributes ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Theme UI uses Emotion internally, and using it with styled-components is highly not recommended. I’d use styled-system instead of Theme UI in existing styled-components codebases.
@emotion/styled
instead ofstyled-components
(@theme-ui/components
uses@emotion/styled
, so you already have it)@emotion/styled
doesn’t supportattrs
. It’s advised to use normal components to assign default values instead. See https://github.com/emotion-js/emotion/pull/617#issuecomment-388284739 and atanasster’s CodeSandbox.Take a look at the div rendered by your Box.
Three classes! And two style tags in our
head
, one fromstyled-components
, and one created by@emotion/core
.And in the className built by Emotion, we can see that
margin
is added last. After removing attrs, and rewriting your code to use only Theme UI, we can control where themargin
appears. With attrs? Well, that’s hard. We’d have to dive intoattrs
implementation.However, this can’t be fixed on
@theme-ui/components
side. One could assume thatmy
is always more important thanm
, but it’d be a huge breaking change, and discrepancy with how CSS works.Maybe I am missing something - cant you just use regular props instead of styled.attrs? This is if the style props are extended as component props as in the case of BoxProps m, my etc. If the styles are not extended, you can just use sx prop on the instantiating side
<Boxy sx={{ bg: "white", mx: 50 }} />
.https://codesandbox.io/s/epic-ritchie-uy5tq?file=/src/App.js