How to Access styles from React?

by

For React 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:

For getting the 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 callback style or by using useRef/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);
}

More Related Contents:

  1. How to create a translucent in React Native?
  2. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  3. React Js conditionally applying class attributes
  4. Scrollable div to stick to bottom, when outer div changes in size
  5. CSS pseudo elements in React
  6. How to add multiple classes to a ReactJS Component?
  7. javascript change background color on click [closed]
  8. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  9. Event timeline with animation
  10. css position absolute making the textbox go down
  11. Adding a new line in a JSX string inside a paragraph – React
  12. unable to scroll in scrollView
  13. Images not loading when relative path is used in React
  14. using css modules how do I define more than one style name
  15. Change Background Color & Font Color Automatically Via CSS [closed]
  16. Is it possible for flex items to align tightly to the items above them?
  17. Keep overflow div scrolled to bottom unless user scrolls up
  18. What the difference of this.state and this.setstate in ReactJS?
  19. React.js: onChange event for contentEditable
  20. React – State not updated
  21. React Native: Getting the position of an element
  22. Can I update a component’s props in React.js?
  23. How to partition input field to appear as separate input fields on screen?
  24. useEffect does not listen for localStorage
  25. Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?
  26. how to set displayName in a functional component [React]
  27. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  28. CSS /JS to prevent dragging of ghost image?
  29. Scroll into view in react
  30. Convert css width string to regular number

Leave a Comment