styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

https://styled-components.com

14,122 members

Channels

# stylelint-processor

Team

Announcing support for the css prop! 🎉

November 26, 2018 at 8:39am

Max StoiberTeam

@mxstbr

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 💃🏼

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! 💜

Show previous messages

January 12, 2019 at 5:33am

Brian Beck@exogen

5:33am

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

August 20, 2019 at 5:28pm

Luis Fernando Valenzuela@bulletninja

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!

5:33pm

Sorry, wrong channel (?) 🙈 (maybe should go to #help)

Edited

September 10, 2019 at 5:50am

Yoshihiro Nakamura@taneba

5:50am

@bulletninja

You can get the syntax highlight by installing vscode-styled-components extension and using css helper.