Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass computed style to children in React

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).

like image 859
everdrone Avatar asked Sep 05 '17 01:09

everdrone


People also ask

How do you pass style to child component react?

To pass styles to child component and use it as scoped style in Vue. js, we can use the deep selector. to add the deep select with >>> , /deep/ or ::v-deep . They all select the b select in a .

How do you pass value from parent to child in react?

import React, { useState } from 'react'; import Child from './Child'; function App() { const [childData, setChildData] = useState({ name: 'unknown', age: 'unknown' }); const passData = (data) => { setChildData(data); }; return ( <div className="App"> <Child passData={passData} /> <p>The person info from the Child ...


Video Answer


1 Answers

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.

like image 54
Dale Francis Avatar answered Sep 22 '22 15:09

Dale Francis