Jss: Dynamic styles.

[trusktr]

@kof Do you have a recommendation on what I can do in the following case? I have this basic React component:

import React from 'react'
import Color from 'tinycolor2'
import jss from '../../../../modules/jss-configured'

import THEME from './THEME'

const stylesheet = jss.createStyleSheet({
    letterIcon: {
        flexDirection: 'column',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: Color(THEME.purple).lighten(5).toString(),
        borderRadius:'2px',

        '& div': {
            display: 'flex',
            color: 'white',
            fontWeight: 'bold',
            fontSize: '1.4em',
        },
    },
}).attach()

export default
class LetterIcon extends React.Component {
    render() {
        let width = this.props.width
        let height = this.props.height
        let letter = this.props.letter
        return (
            <div className={stylesheet.classes.letterIcon} style={{
                width: `${width}px`,
                height: `${height}px`,
            }}>
                <div> {letter} </div>
            </div>
        )
    }
}

As you can see, most styles are in the stylesheet, but some styles need to be dynamic, so they are directly on the element style attributes. How can we move all to the stylesheet? It'd be nice (if there isn't already (I think we might've chatted about this before)) to have some way to specify properties in the stylesheet that are dynamic.

Any suggestions? React is reactive, maybe we can come up with a solution. Maybe a higher order component can use componentWillUpdate or something, and update the sheet dynamically?

[kof]

I think its fine that dynamic properties are defined using inline styles. Consider style sheet to be used for static styles mostly.

[jcheroske]

Had this exact question today, and this was precisely the expert validation I needed. Perhaps this could be moved into the docs somewhere?

[trusktr]

In case anyone stumble here, there's function properties now.

let left = 0

let sheet = jss.createStyleSheet( {
  foo: {
    left: function() {
      return `${left}px`
    }
  }
}).attach()

// ... apply class to some element ...

function animate() {
  left++
  sheet.update()
  requestAnimationFrame(animate)
}

Not sure how that performs compared to the inline styles though.

[kof]

super performant, same like inline, faster than reacts inline.

On Mar 24, 2017 01:35, "Joseph Orbegoso Pea" [e-mail]
wrote:

In case anyone stumble here, there's function properties now.

let left = 0
let sheet = jss.createStyleSheet( {
foo: {
left: function() {
return ${left}px
}
}
}).attach()
// ... apply class to some element ...
function animate() {
left++
sheet.update()
requestAnimationFrame(animate)
}

Not sure how that performs compared to the inline styles though.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/cssinjs/jss/issues/170#issuecomment-288892208, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AADOWDBF79VSAmLcCaSStiikiL3Hhackks5rowHXgaJpZM4GvWJl
.

[trusktr]

What if there's 1000 elements, each with a separate transform (so 1000 classes and 1000 transform properties) in the same style sheet. Suppose then I want to animate one element. Would update the whole stylesheet (which is used for 1000 elements) just to animate one element be better? Or would it be better if 1000 elements had their own style and to update just a single element's inline style in this case?

Right now my elements are all like

<motor-node class="unique-1" style="transform: matrix3d(...)">
</motor-node>
<motor-node class="unique-2" style="transform: matrix3d(...)">
</motor-node>

but wondering if I could switch to a single sheet (JSS) and animate a rule for each one like

<style> 
  .unique-1 { transform: matrix3d(...) }
  .unique-2 { transform: matrix3d(...) }
</style>
<motor-node class="unique-1">
</motor-node>
<motor-node class="unique-2">
</motor-node>

Would that scale with 100 or 1000 elements?

[kof]

There is some limit for sure, but it should be very high. Also you can do sheet.getRule('name').prop('transform','new value') as an optimization to set a specific rules property.