Good day to all, is there a possibility in react.js to get the style of the parent component, for example: Parent component:

class App extends React.Component { render() { return ( <div> <div id="myField"> <MyComponent /> </div> </div> ) } }

Child component:

 class MyComponent extends React.Component { render() { return ( <svg width="100%" height="100%"> </svg> ) } }

In this situation, I would like to get the CSS style (namely, width and height) of the div "myField". Is it possible? Thank you in advance.

    1 answer 1

    Hello, I just study react.
    I would do so - in the Parent Component would determine the desired css style

     let computedStyle = getComputedStyle(document.getElementById('myField')); let width = computedStyle.width;

    and then pass it on properties in Child Component

     <MyComponent width={width} />

    Or you can define the style definition as a function and pass the function to the Children Component, and then start it and get the property value when needed.

    • Good afternoon, I solved the problem in this way: - fin
    • Good afternoon, thanks for the comment. Solved the problem in this way get the height and width of the component through findDOMNode : this.fSize.svgBlock.width = ReactDOM.findDOMNode(this).parentNode.getBoundingClientRect().width; - fin