我正在使用 React 和 SASS,我有一个立方体组件,我想用动态宽度渲染它。但是,我在我的 .scss 中操作这个宽度。有一个例子。
我的组件:
<Cube style={{ width: '100px' }} />
<Cube style={{ width: '70px' }} />
<Cube style={{ width: '20px' }} />
我的style.scss:
$cubeWidth: 150px;
$cubeHeight: $cubeWidth;
#cube {
width: $cubeWidth;
height: $cubeHeight;
}
// In this cube, I have -of course- 6 faces, and I operate in my style.scss:
.cubeFace1 {
transform: translateZ($cubeWidth / 2);
}
... etc
怎么可能让我的 $cubeWidth 等于我的动态宽度?
此外,.scss 在 index.js 中加载如下:
// React index.js
import './css/style.scss';
render(<Router />, document.getElementById('root'));
谢谢 !
最佳答案
不可能从 react props 传递到 sass 变量。但是,您可以使用样式组件:https://styled-components.com/docs/basics#installation
npm i styled-components
const Cube = styled.div`
width: props.cubeWidth;
height: props.cubeHeight;
`;
const CubeFaceOne = styled.span`
transform: translateZ(props.cubeWidth / 2);
`;
使用这种方法,Cube 和 CubeFace 将需要分成两个独立的组件,并以这种形式呈现,render() {
return (
<Cube>
<CubeFaceOne />
<CubeFace />
<CubeFace />
...
</Cube>
)
}
关于javascript - 如何从 react Prop 传递到 sass 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50042053/