Announcing support for the css prop! 🎉
November 26, 2018 at 8:39amAnnouncing support for the css prop! 🎉
November 26, 2018 at 8:39amExcited to announce that styled-components now has native support for the
css prop! const MyButton = () => (<buttoncss={`color: papayawhip;background: palevioletred;`}>Click me!</button>)
Simply upgrade to the latest Babel plugin version and you're ready to
css and roll 💃🏼Announcement blogpost with a lot more info: https://medium.com/styled-components/announcing-native-support-for-the-css-prop-in-styled-components-245ca5252feb
Let us know what you think! 💜
November 27, 2018 at 1:39pm
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 asconst 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!
I hope that helps 👍
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.
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
November 28, 2018 at 7:44pm
November 29, 2018 at 9:11am
It's a pragmatic advice. That means we rather duplicate components with same css props rather than reusing css ?
December 1, 2018 at 4:09pm
December 2, 2018 at 5:35pm
Does anyone else have a problem where only template strings work for the
css prop? (Double quotes don't seem to work. Strange.)That sounds like a bug, those should work! Can you submit an issue with your code here: https://github.com/styled-components/babel-plugin-styled-compnonents? Thank you!
I just set up the macro with create-react-app, and it works until I try to use the css prop. Is this working? Or am I missing something?
Babel Macro support is WIP, follow this PR: https://github.com/styled-components/babel-plugin-styled-components/pull/181
It's a pragmatic advice. That means we rather duplicate components with same css props rather than reusing css ?
No, don't duplicate them, reuse them!
const Row = (props) => <div {...props} css="display: flex; flex-direction: row;" />
Then use that
<Row /> component throughout your app. That's always been the way to go, no matter if you use the css prop or the styled.x API!December 4, 2018 at 8:20pm
It has occurred to me that with the
css prop we can now write our string interpolations using state values in addition to props. What do you think about writing styled components in that way?December 14, 2018 at 4:29am
First answer in https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245 solved it for me.
Thanks! That’s exactly what I’ve been looking for!
January 11, 2019 at 10:11pm
FYI, here is how I implemented the solution to Typescript + css prop on element:
import { Interpolation } from 'styled-components';import { Theme } from './lib/theme';declare module 'react' {interface DOMAttributes<T> {css?: Interpolation<Theme>;}}const Foo = () => <div css="color: pink;">Woot</div>;
January 12, 2019 at 5:30am
Should the Babel plugin update have been a major breaking version bump, perhaps? It seems very presumptuous to assume that nobody had any existing props called
css anywhere in their app. The Babel plugin would start hijacking those if you installed with e.g. ^1.0.0, wouldn't it? It has occurred to me that with the
css prop we can now write our string interpolations using state values in addition to props. What do you think about writing styled components in that way?I'm curious about whether or not this is actually possible, based on the description of how it works. I don't see how the transformation could hoist all of the necessary local variables up into the outer scope where I assume it puts the generated component. Does it actually work?