13

How to pass the computed style of a React component to its children?

It would be very handy for me to access the <Parent /> computed style from <Child />'s props.

Also, each time the parent component changes, the child must receive updated CSS properties (say the user resizes the window and the parent's width is set to 50vw, then the child component will receive the updated size in pixels).

Pseudocode:

// App.jsx
class App extends Component {
  render() {
    return (
      <Parent>
        <Child />
        <Child />
      </Parent>
    );
  }
}
// Child.jsx
class Child extends Component {
  render() {
    return <h1>Parent's margin-top: {this.props.parentComputedStyle.marginTop}</h1>
  }
}

Is this possible? Do i need a third-party library?


Edit 1

Came up with some sample code to explain my problem at best:

import React, { Component, Children, cloneElement } from 'react';

class Parent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div {...this.props}>
        {this.props.children.map((child, index) => {
          return (
            cloneElement(child, {
              key: index.toString(),
              parentComputedStyle: this.props.style
            })
          );
        })}
      </div>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <p>Parent width is {this.props.parentComputedStyle.width}</p>
    );
  }
}

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <h1>Styles</h1>
        <Parent
          style={{
            width: '50vw',
            backgroundColor: 'rgba(255, 128, 0, 0.4)',
            marginTop: '10px'
          }}
        >
          <Child />
          <Child />
          <Child />
        </Parent>
      </div>
    );
  }
}

export default App;

Here the Child component renders "50vh" on screen, i'd like to have that value in pixels (the computed style, not the react style object).

7
  • You can use props
    – Gerardo
    Sep 5, 2017 at 1:17
  • Yes but how? i tried window.getComputedStyle(this.refs.childRef) but inside the parent's render method throws an error.
    – everdrone
    Sep 5, 2017 at 1:19
  • You're doing {this.props.parentComputedStyle.marginTop} so you need to pass your style object to <Children> like <Children parentComputedStyle={myStyleObject}> and in order to update the components you should set your styles in your parent component state.
    – Gerardo
    Sep 5, 2017 at 1:23
  • The problem is that if i set the state in the render method, it throws error, if i set the state with the CSS in the componentDidUpdate method, it enters an infinite call loop (because state changes calls the render again, and it calls the lifecycle method and so on..).
    – everdrone
    Sep 5, 2017 at 1:39
  • And what triggers the update of the css object? I mean, an event like a click, a user input?
    – Gerardo
    Sep 5, 2017 at 2:18

1 Answer 1

7

So there are a few different ways to do it. The first is to simply add in a class name and then write some valid css.

CSS

.cssClass > h1 {
    // do all the things
}

App.jsx

class App extends Component {
  render() {
    return (
      <Parent className="cssClass">
        <Child />
        <Child />
      </Parent>
    );
  }
}

The other thing you can do is to pass in a style object and reference it through props.

App.jsx

class App extends Component {
  render() {
    const otherWay = { marginBottom: '5px' }

    return (
      <Parent>
        <Child style={{marginTop: '5px'}} />
        <Child style={otherWay} />
      </Parent>
    );
  }
}

Child.jsx

class Child extends Component {
  render() {
    return <h1 style={this.props.style}>Parent's</h1>
  }
}

Try to think of everything in one direction Parent -> Child, best to not try to go the other direction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.