javascripthtmlcssreactjsstyled-components

Calculate height of styled-components


For styled-components, how can I fetch the height of any particular div? For e.g.., in the below example, how can I get the height(100px) of Outer tag,

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

import "./styles.css";

function App() {
  const Outer = styled.div`
    height: "100px";
    border: 1px solid black;
  `;
  return (
    <div className="App">
      <Outer>Inside</Outer>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I have tried Outer.height() but it doesn't work. How can I get the height of Outer tag?


Solution

  • You can add reference to get size of Outer and do this.outerRef.current.clientHeight

    Something like that :

    const Outer = styled.div`
      height: 100px;
      background: red;
    `;
    
    export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.outerRef = React.createRef();
        this.state = {
          outerHeight: 0
        };
      }
    
      componentDidMount() {
        this.setState({ outerHeight: this.outerRef.current.clientHeight });
      }
    
      render() {
        return (
            <Outer ref={this.outerRef}>
              {this.state.outerHeight}
            </Outer>
        );
      }
    }
    

    You can check on : https://codesandbox.io/embed/6yq239ljlk?fontsize=14

    This works but I don't know if it's on this way you need height.