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?
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).
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 .
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 ...
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With