通过css使用纸张提升道具？
通过css使用纸张提升道具？
提问于 2021-03-02 03:15:58
这可能是一个更大的设计问题，但在我的material ui应用程序中，我试图让所有样式都在CSS中完成(使用makeStyles)，而不是在jsx中进行一些样式(根据material ui文档)和在CSS中进行一些。
到目前为止，我所有的样式都只在css中工作，但我在Paper组件上有一个关键点。我以为这是一个简单的例子，将elevation：'3‘添加到我的useStyles对象(cv__paper)中，但它的工作方式如下所示：
//works as expeted
<Paper className={classes.cv__paper} elevation={3}>
<img
className={classes.image}
src={image}
alt=""
></img>
</Paper //won't style with elevation
<Paper className={classes.cv__paper}>
<img
className={classes.image}
src={image}
alt=""
></img>
</Paper
...
cv__paper: {
elevation: '3'
}完整代码
为了确认，我已经检查了css是否正在应用(将背景更改为蓝色)
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
padding: '25px',
maxWidth: '60%'
},
content: {
height: '100%',
width: '100%',
justifyContent: 'center',
textAlign: 'center'
},
image: {
maxWidth: '100%',
maxHeight: '100%'
},
download__icon: {
fontSize: '100px'
},
cv__paper: {
elevation: 3
}
}));
export default useStyles;
const Cv = () => {
const classes = useStyles();
return (
<Container className={classes.root}>
<Box className={classes.content}>
<Paper className={classes.cv__paper} elevation={3}>
<img
className={classes.image}
src={image}
alt=""
></img>
</Paper>
<Link variant="IconButton" href={CvFile} download="mreaybeaton.pdf">
<GetAppIcon className={classes.download__icon}></GetAppIcon>
</Link>
</Box>
</Container>
);
};有什么想法吗？
回答 1
Stack Overflow用户
发布于 2021-03-02 05:15:32
正如docs提到的，elevation是一个赋予Paper阴影深度的属性。
因此，如果您想要添加到Paper高程样式中，则必须在className中添加boxShadow。
检查下面的代码片段：
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
padding: '25px',
maxWidth: '60%'
},
content: {
height: '100%',
width: '100%',
justifyContent: 'center',
textAlign: 'center'
},
image: {
maxWidth: '100%',
maxHeight: '100%'
},
download__icon: {
fontSize: '100px'
},
cv__paper: {
boxShadow: "0px 3px 3px -2px rgb(0 0 0 / 20%), 0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%)"
}
}));
export default useStyles;
const Cv = () => {
const classes = useStyles();
return (
<Container className={classes.root}>
<Box className={classes.content}>
<Paper className={classes.cv__paper} elevation={3}>
<img
className={classes.image}
src={image}
alt=""
></img>
</Paper>
<Link variant="IconButton" href={CvFile} download="mreaybeaton.pdf">
<GetAppIcon className={classes.download__icon}></GetAppIcon>
</Link>
</Box>
</Container>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66428260
复制相关文章
相似问题
腾讯云开发者
