我正在使用React缩放平移捏库,并希望给予高度:“100%”的TransformWrapper和TransformComponent,我可以这样做,从 chrome 检查刚刚好,但当试图添加类名或直风格={{高度:“100%"}}它不会显示它,任何想法?
要尝试的代码:https://codesandbox.io/s/withered-violet-uumcx0?file=/src/App.tsx
代码:
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>
);
}
3条答案
按热度按时间ghhkc1vu1#
react-zoom-pan-pinch
库中的TransformWrapper
和TransformComponent
组件似乎不接受className
或style
属性。根据文档,您应该使用
wrapperClass
、wrapperStyle
、contentClass
或contentStyle
来表示TransformComponent
。iyfamqjs2#
我希望这对你有帮助
首先,将makeStyle中的样式添加到TransformComponent中的wrapperClass属性中
在makeStyle中,您可以在组件TransformComponent中导航目标容器,如下所示:
以下是codesandbox中的完整代码
mzillmmw3#
你可以用纯css来做。
将此添加到父div:
把这两个类转换成css:
它会起作用的。
在此查看CODESANDBOX
正如您在the docs中所发现的那样,您可以通过将
wrapperClass
和contentClass
相加来完成此操作,如下所示:其中
full-height
如下所示