How to Access Styles from React

How to Access styles from React?

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 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);
}

How to access style element in react component?

You need to add a className to your list Item, With react you can add it using className attribute

<li className={'list-done'}>item1</li>

You might need to load styles in your component. You need to configure style-loader with webpack for it.

Check this answer on how to configure styles with webpack

or else write inline styles

render() {
   const listStyles = {
       color:red;
   }
   return (
      <li styles={item.done? listStyles: {}}>item1</li>
   )
}

How do I access styles object inside React container?

You can create a separate style for that task:

const styles = {
    chatsContainer: {
        width: '100%',
        height: '440px',
        backgroundColor: 'white',
        borderRadius: '0px 0px 24px 24px' 
    },
    newHeight: {
        height: '250px'
    }
}

and then you can create a state that adds your newHeight style on your div when the state is true;

const [add, setadd]= useState(false)

const onClickHandler= ()=>{
setadd(!add)
}

 <div style={`${styles.chatsContainer} ${add && style.newHeight}`} className='ce-chats-container'>

And dont forget to trigger your onClickHandler function.

Next.js: How to get applied styles from element?

You can use computed styles to get what you need, although it won't be a "simple" object with properties. You'll need to query each property individually:

if (divEl.current) {
      setDivStyle(getComputedStyle(divEl.current));
    }

and then you can do something like:

divStyle.getPropertyValue("background-color")

Here's an example sandbox (forked from yours) that demostrates it.

How to get access to CSS values from a styled component (React)?

You can use the innerRef prop on your component to get a reference to the DOM node, and then use window.getComputedStyle on the node to get the font-size.

Example

const Hello = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;
  font-size: 10px;
`;

class Form extends React.Component {
  ref = null;

  componentDidMount() {
    this.getFontSize();
  }

  getFontSize = () => {
    console.log(
      window.getComputedStyle(this.ref, null).getPropertyValue("font-size")
    );
  };

  render() {
    return <Hello innerRef={ref => (this.ref = ref)} />;
  }
}

Is there a way to style an element in React using the ID without using className?

Since you are using CSS Modules you need to access the styles slightly differently. You need to import styles from 'Component.module.css'; and then declare your styles by referencing this imported object styles.MyClass or in your case since you have hyphens you need to use bracket notation styles["top-bar"]

Here is a working sandbox

//MyComponent.js

import styles from "./MyComponent.module.css";

export default function MyComponent() {
  return (
    <div id={styles["top-bar"]}>
      <h2>My Component</h2>
      <InnerComponent id="inner" />
    </div>
  );
}

function InnerComponent({ id }) {
  return (
    <div id={styles[id]}>
      <h3>Inner Component</h3>
      <p id={styles.para}>Styled Paragraph</p>
    </div>
  );
}

//MyComponent.module.css

#top-bar {
  width: 90vw;
  margin: 1rem auto;
  padding: 1rem;
  text-align: center;
  background-color: LightPink;
}

#inner {
  background-color: LightBlue;
  text-align: left;
}

#para {
  color: red;
}

---

Here's a quick snippet showing it working with IDs.

function MyComponent() {
  return (
    <div id="top-bar">
      <h2>My Component</h2>
      <InnerComponent id="inner" />
    </div>
  )
}

function InnerComponent({id}) {
  return (
    <div id={id}>
      <h3>Inner Component</h3>
    </div>
  )
}

ReactDOM.render(<MyComponent />, document.getElementById('App'));

#top-bar {
  width: 90vw;
  margin: 1rem auto;
  padding: 1rem;
  text-align:center;
  background-color: LightPink;
}

#inner {
  background-color: LightBlue;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="App"></div>

---

Related Topics