Comments (6)
Oh this is just for style
then?
Line 15 in efc5dc4
from glamor.
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.
from glamor.
Are there any significant performance issues with invoking style() on every render?
from glamor.
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.
from glamor.
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 feedids
intohydrate
while starting up
however, I personally haven't found the need to use these yet.
from glamor.
closing this, please reopen if I've missed something.
from glamor.
Related Issues (20)
- css.global doesn't support hover?
- Font Face Multiple Font Support HOT 1
- Promote css prop with react usage
- Deleting rules from the stylesheet
- Calling css({'data-css-nil': ''}) throws unexpected error HOT 1
- glamor-skeleton help
- psudeo element: scrollbar is not working
- Server-side rendering styles from a third-party library
- Values for the non-standard properties being set as numbers becomes as string with `px` concatenated in output HOT 4
- When NODE_ENV=production hydratation is broken
- Missing .d.ts for "glamor/server" HOT 1
- Outdated index.d.ts published HOT 1
- babel 7 support
- how to use -webkit-line-clamp HOT 1
- How to change src when the img hover ?
- Speedy mode is harmful for some production use cases (f.e. server-side rendering, prerendering, especially when glamor used in the library, etc)
- Generate inline style attribute text. HOT 3
- FBJS library causing vulnerability HOT 1
- className did not match
- update to a maintained `through`?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from glamor.