给卡代码在这里: 卡
我如何更新卡片样式或任何材料UI样式
const styles = theme => ({ card: { minWidth: 275, },
如下:
const styles = theme => ({ card: { minWidth: 275, backgroundColor: props.color },
当我尝试最新的时,我得到了
Line 15: 'props' is not defined no-undef
当我更新代码为:
const styles = theme => (props) => ({ card: { minWidth: 275, backgroundColor: props.color },
也
const styles = (theme ,props) => ({ card: { minWidth: 275, backgroundColor: props.color },
代替
我在网页上弄乱了组件卡样式。
顺便说一句,我通过以下道具:
<SimpleCard backgroundColor="#f5f2ff" />
请帮忙!
该答案是在4.0版之前严重过时的!
认真地说,如果要对功能组件进行样式设置,请使用makeStyles。
makeStyles
在詹姆斯谭答案是4.x版本的最佳答案
下面的任何内容都是古老的:
使用时withStyles,您可以访问theme,但不能访问props。
withStyles
theme
props
请注意,Github上有一个要求解决此功能的公开问题,某些评论可能会为您提供您可能感兴趣的替代解决方案。
使用props更改卡的背景颜色的一种方法是使用内联样式设置此属性。我已对原始代码箱进行了一些更改,您可以查看修改后的版本以了解实际操作。
这是我所做的:
backgroundColor
// in index.js if (rootElement) { render(<Demo backgroundColor="#f00" />, rootElement); }
function SimpleCard(props) { // in demo.js const { classes, backgroundColor } = props; const bull = <span className={classes.bullet}>•</span>; return ( <div> <Card className={classes.card} style={{ backgroundColor }}> <CardContent> // etc
现在,渲染的Card组件具有红色(#F00)背景
查看文档的“ 替代”部分,以了解其他选项。