className effect not showing reactjs-CodePudding

I'm using react zoom pan pinch library, and want to give height:"100%" to TransformWrapper and TransformComponent, i can do it from chrome inspect just fine, but when trying to add className or straight style={{height:"100%"}} it wont show it, any idea ?

code to try: https://codesandbox.io/s/withered-violet-uumcx0?file=/src/App.tsx

code:

import React from "react";
import { makeStyles } from "@material-ui/core";

import "./styles.css";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
const useStyles = makeStyles({
  wrapper: {
    height: "100%",
    backgroundColor: "red"
  }
});
export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <div className="element">
        <TransformWrapper
          className={classes.wrapper}
          limitToBounds={true}
          alignmentAnimation={{ sizeX: 0, sizeY: 0 }}
          centerZoomedOut={true}
        >
          {({ zoomIn, zoomOut, resetTransform }: any) => (
            <React.Fragment>
              <div style={{ border: "1px solid black", height: "300px" }}>
                <div className="tools">
                  <button onClick={zoomIn}> </button>
                  <button onClick={zoomOut}>-</button>
                  <button onClick={resetTransform}>x</button>
                </div>
                <TransformComponent>
                  <img
                    width="100%"
                    src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"
                    alt="test 2"
                  />
                </TransformComponent>
              </div>
            </React.Fragment>
          )}
        </TransformWrapper>
      </div>
    </div>
  );
}

CodePudding user response：

It looks like the TransformWrapper and TransformComponent components from the react-zoom-pan-pinch library don't accept a className or style prop.

According to the documentation you should use wrapperClass, wrapperStyle, contentClass or contentStyle for TransformComponent.

CodePudding user response：

i hope this will help you

first, add the style from makeStyle into the wrapperClass props in your TransformComponent

<TransformComponent wrapperClass={classes.wrapper}>

in your makeStyle, you can navigate your target container inside the component TransformComponent in to like this:

const useStyles = makeStyles({
  wrapper: {
    height: "calc(100% - 21px)", // 21 is the height of tools
    "&> div": {
      height: "100%",
      backgroundColor: "blue !important"
    }
  }
});

here is the complete code in codesandbox

CodePudding user response：

You can do it with pure css.

Add this to your parent div:

style={{
         display: "flex",
         flexDirection: "column",
         border: "1px solid black",
         height: "300px"
       }}

And those two classes to css:

.react-transform-wrapper,
.react-transform-component {
  height: 100% !important;
}

And it will work.

Check it here CODESANDBOX

UPDATED

As you can find in the docs, you can do it by adding wrapperClass and contentClass as follows:

<TransformComponent wrapperClass="full-height" contentClass="full-height">

where full-height is as follows

.full-height {
  height: 100% !important;
}