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! 💜
Show previous messages

November 27, 2018 at 6:12pm
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
reuse components, not CSS
like-fill
2
  • reply
  • like
This is a really helpful edition!
  • reply
  • like
It's a pragmatic advice. That means we rather duplicate components with same css props rather than reusing css ?
Edited
  • reply
  • like

December 1, 2018 at 4:09pm
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?
  • reply
  • like
Does anyone else have a problem where only template strings work for the css prop? (Double quotes don't seem to work. Strange.)
  • reply
  • like

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!
  • reply
  • like
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?
  • reply
  • like
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!
  • reply
  • like
Sweeeeet
  • reply
  • like

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?
  • reply
  • like

December 14, 2018 at 4:29am
How can I use this feature with TypsScript?
css prop on the normal html element causes type error:
Type '{ css: string; }' has no properties in common with type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'
like-fill
1
  • reply
  • like
like-fill
2
  • reply
  • like
Thanks! That’s exactly what I’ve been looking for!
like-fill
2
  • reply
  • like

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>;
like-fill
2
  • reply
  • like

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?
Edited
  • reply
  • like
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?
Edited
  • reply
  • like

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!
  • reply
  • like
Sorry, wrong channel (?) 🙈 (maybe should go to #help)
Edited
  • reply
  • like

September 10, 2019 at 5:50am
Show more messages