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

Announcing support for the css prop! πŸŽ‰

November 26, 2018 at 8:39am

Announcing support for the css prop! πŸŽ‰

November 26, 2018 at 8:39am
Excited to announce that styled-components now has native support for the css prop!
const MyButton = () => (
<button
css={`
color: papayawhip;
background: palevioletred;
`}
>
Click me!
</button>
)
Simply upgrade to the latest Babel plugin version and you're ready to css and roll πŸ’ƒπŸΌ
Let us know what you think! πŸ’œ

November 26, 2018 at 8:40am
This has been a long time coming, hope y'all will enjoy this πŸ’œ
like-fill
2
  • reply
  • like
Awesome! 😍
like-fill
1
  • reply
  • like

November 26, 2018 at 6:22pm
Good job! It helps a lot for prototyping and adding such a great feature without even increasing runtime code is top notch 😁
like-fill
1
  • reply
  • like

November 27, 2018 at 11:50am
Really nice! But I don't totally understand when and when not to use it. Can we replace our current e.g. styled.div const with this as it just converts to the "old" style? It seems to be as powerfull as we need. (prop theme support and media querries?)
Or should we use this just for a quick testing purpose?
Also what does it do if we pass the css prop to a already declared styled component? Will it shallow or deep merge those styles?
Are there any performance issues when using this?
  • reply
  • like
the main use case I have for this is in the early stages of a project when I'm not quite sure where I should draw the boundaries between components, where it makes sense to abstract things or not.
  • reply
  • like
Once I have a better idea and am less "in the fog" about it, I either convert them or start using the standard styled-components API. Does that make sense?
  • reply
  • like
Really nice! But I don't totally understand when and when not to use it. Can we replace our current e.g. styled.div const with this as it just converts to the "old" style? It seems to be as powerfull as we need. (prop theme support and media querries?)
Or should we use this just for a quick testing purpose?
Also what does it do if we pass the css prop to a already declared styled component? Will it shallow or deep merge those styles?
Are there any performance issues when using this?
No, there's no performance issues, it will work perfectly fine!
The styles are merged as CSS merges them, the last one wins. These two are equivalent:
const Box = styled.div`
color: blue;
`
<Box css="color: red;" />
// is the same as
const Box = styled.div`
color: blue;
`
const StyledBox = styled(Box)`
color: red;
`
<StyledBox />
In fact, the Babel plugin converts the first on to the second one under the hood, so what you're actually running in the browser is the second one!
like-fill
1
  • reply
  • like
I hope that helps πŸ‘
  • reply
  • like
Congratulations for this feature! πŸŽ‰πŸŽ¨
I have one issue so far, it would be great to only pass the theme instead of all the props when using the object style form :
`<div css={theme => /* use the theme */} />`
instead of
`<div css={({ theme }) => /* use the theme */} />`
Passing the whole props object doesn't make much sense in this context because all the props are already available in the component.
Also this would be consistent with emotion v10 API which provide the theme object only.
I also started a small experiment around styled-system and the css prop : https://codesandbox.io/s/jl31x0kq93
With this API I'm not sure if I'll use "styled" anymore because my building blocks are often more elaborated than a single node.
like-fill
1
  • reply
  • like
Would the css prop be possible to use in an unejected create-react-app? I'm asking as we can't add .babelrc to CRA.
like-fill
1
  • reply
  • like
not yet, but very soon! See this PR, which adds Babel macro support and should be merged soon: https://github.com/styled-components/babel-plugin-styled-components/pull/181
like-fill
3
  • reply
  • like
Wow , thank you!
like-fill
1
  • reply
  • like
What's the recommend way to reuse css in this case ? Should i just import normal string or a css file ? How about less, sass ?
  • reply
  • like

November 28, 2018 at 7:44pm
Can I use it in react-native?
  • reply
  • like

November 29, 2018 at 9:11am
Yep!
  • reply
  • like
Show more messages