Khan / aphrodite

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
5.35k stars 188 forks source link

Cant get height of Aphrodite element #381

Closed inciteio closed 5 years ago

inciteio commented 5 years ago

I am using React and Aphrodite. I need to get the height of a fixed element in order to position it properly. Because I cannot know when Aphrodite styles are rendered, I can't use javascript to get the height of my element. Is there any way to capture height after Aphrodite styles have been applied to an element?

`componentDidUpdate(props, state) {
        Styles(this.props.button).then(results => {
            this.setState({ styles: results }, () => {
                console.log(
                    this.feedback_ref.current.getBoundingClientRect()
                )
            })
        })
}

render() {
    return (
        <div id={'wrapper'}>
            {isEmpty(this.state.styles) ? null : (
                <div
                    ref={this.feedback_ref}
                    id={'feedback_container'}
                    className={
                        (this.state.styles.universal,
                        this.state.styles.position,
                        this.state.styles.foreground,
                        this.state.styles.text)
                    }
                >
                    Feedback
                </div>
            )}
        </div>
    )
}`
inciteio commented 5 years ago

Solved this by adding a setTimeout after style update.