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! 💜
December 1, 2018 at 4:09pm
December 2, 2018 at 5:35pm
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!
Babel Macro support is WIP, follow this PR: https://github.com/styled-components/babel-plugin-styled-components/pull/181
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
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?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?
August 20, 2019 at 5:28pm
Do any one of you know a way to properly highlight syntax within the css prop in VSCode? Bonus points if you know how to make colorize work there too!
Sorry, wrong channel (?) 🙈 (maybe should go to #help)
September 10, 2019 at 5:50am
You can get the syntax highlight by installing vscode-styled-components extension and using css helper.