Open andywer opened 6 years ago
css
prop into a CSS class bodyclassName
propclassName
propunmount
and mount
steps if the css
prop changedcss
prop stays untouchedcss
prop for other purposes, since the ReactCSSDOM css
prop is only interpreted on HTML elements, not on componentsstyle
prop handling and add css
prop handlingcss
prop handlingQuestion: how to generate @
rules like keyframes or font-face?
For inspiration:
@stereobooster This is a good question indeed and I am not completely sure yet.
I have been thinking about using native „pseudo elements“, though:
const spin = React.createRef()
const Spinner = () => (
<div css={{ animationName: spin, animationDuration: 2s }} />
)
ReactCSSDOM.render(
<>
<keyframes
ref={spin}
steps={{
'0%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(360deg)'
}
}}
/>
<Spinner />
</>
)
The example uses React 16.3‘s new createRef()
API. Not sure if this would be the best way to go, though. Just spitballing here 😉
nice! styled-jsx manages styles in a similar way https://github.com/zeit/styled-jsx/blob/master/src/stylesheet-registry.js
@stereobooster I think this works better for at-rules:
const Spinner = () => (
<keyframes
steps={{
'0%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(360deg)'
}
}}
>{spin => (
<div css={{ animationName: spin, animationDuration: 2s }} />
)}</keyframes>
)
It uses the children
prop as render prop, very much like React 16.3's new context API does. Also this code snippet resembles a real-world use case better than the previous one.
Extend
react-dom
to provide a generic, fully featured, declarative styling API that is as easy to use as inline styles, but comes with the power of CSS classes:To render your app:
Server-side rendering should also be really simple. Something like that:
Benefits