When using the react zoom pan pinch library, I am trying to set the height to "100%" for TransformWrapper and TransformComponent. Interestingly, it works perfectly fine when done through Chrome inspect, but when attempting to add a className or use style={{height:"100%"}}, it doesn't reflect the change. Any suggestions on how to make it work?
Here is the code snippet 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>
);
}