How to access styles from React?

Question

I am trying to access div width and height styles in React, but I ran into one problem. This is what I got so far:

componentDidMount() { console.log(this.refs.container.style); } render() { return ( <div ref={"container"} className={"container"}></div> //set reff ); } 

This works, but the output I get is a CSSStyleDeclaration object, and in the whole property I can use all the CSS selectors for this object, but none of them are set. They are all given an empty string.

This is the result of CSSStyleDecleration: http://pastebin.com/wXRPxz5p

Any help on viewing actual styles (inevitable events) would be greatly appreciated!

Thanks!

Answer 1

For Reaction v <= 15

 console.log( ReactDOM.findDOMNode(this.refs.container).style); //React v > 0.14 console.log( React.findDOMNode(this.refs.container).style);//React v <= 0.13.3 

EDIT:

To get a specific style value

 console.log(window.getComputedStyle(ReactDOM.findDOMNode(this.refs.container)).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes; 

For React v> = 16

assign ref using the callback style or using createRef ().

 assignRef = element => { this.container = element; } getStyle = () => { const styles = this.container.style; console.log(styles); // for getting computed styles const computed = window.getComputedStyle(this.container).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes; console.log(computed); } 

Answer 2

It is worth noting that although ReactDOM.findDOMNode can be used today, in the future it will be deprecated instead of references to callbacks.

There is a post here by Dan Abramov that describes the reason not to use findDOMNode, providing examples of how to replace using ReactDOM.findDOMNode with a ref callback.

Since I saw how SO users were upset when only the link was included in the response, so I will give one of the examples that Dan kindly provided:

findDOMNode (stringDOMRef)

 **Before:** class MyComponent extends Component { componentDidMount() { findDOMNode(this.refs.something).scrollIntoView(); } render() { return ( <div> <div ref='something' /> </div> ) } } **After:** class MyComponent extends Component { componentDidMount() { this.something.scrollIntoView(); } render() { return ( <div> <div ref={node => this.something = node} /> </div> ) } } 

Answer 3

You should use the ReactDOM.findDOMNode method and work from there. Here is the code that does what you need.

 var Hello = React.createClass({ componentDidMount: function() { var elem = ReactDOM.findDOMNode(this.refs.container); console.log(elem.offsetWidth, elem.offsetHeight); }, render: function() { return ( <div ref={"container"} className={"container"}> Hello world </div> ); } }); ReactDOM.render( <Hello name="World" />, document.getElementById('container') ); 

jsFiddle

Answer 4

You already have a style, the reason why CSSStyleDeclaration object attributes have so many empty string values ​​that it is a reference to the internal style.

See what happens if you make changes as shown below:

<div ref={"container"} className={"container"} style={{ width: 100 }}></div>

Answer 5

Here is an example of computing the value of a CSS property using the React .getComputedStyle method:

 class App extends React.Component { constructor(props) { super(props) this.divRef = React.createRef() } componentDidMount() { const styles = getComputedStyle(this.divRef.current) console.log(styles.color) // rgb(0, 0, 0) console.log(styles.width) // 976px } render() { return <div ref={this.divRef}>Some Text</div> } }