How to use css prop?

[threepointone]

How to use css prop?

[KyleAMathews]

Oh this is just for style then?

glamor/src/react.js

Line 15 in efc5dc4

style(css)

[threepointone]

no, you can pass any rule into it

<div css={media(...)}></div>

it also accepts arrays, and wraps 'plain' objects with style, so this works too

<div css={[{color: 'red'}, hover({ color: 'blue'}), media(...)]}></div>

happy to make enhancements if I can make this easier/ simpler.

[vdanchenkov]

Are there any significant performance issues with invoking style() on every render?

[threepointone]

Not really, it barely registers in the perf profile. On my laptop, I can do about 10000 unique styles in under 50ms (in prod mode). As a comparison, all of twitter's css is under 10k styles iirc. And when rerendering, it barely even shows in the perf profile.

Please let me know if do you see any issues, because I keep testing this to be certain.

[threepointone]

For posterity's sake; 2 things you can do if it bothers you much -

• declare the styles outside render, and spread the object when rendering
• prerender styles with renderToStatic and feed ids into hydrate while starting up

however, I personally haven't found the need to use these yet.

[threepointone]

closing this, please reopen if I've missed something.