我正在尝试使用样式组件来设置我自己的子组件的样式。
例如,我创建了一个名为myCard的自定义卡组件,如下所示:
import React from "react";
import Card, { CardActions, CardContent } from "material-ui/Card";
import Button from "material-ui/Button";
import Typography from "material-ui/Typography";
const myCard = props => {
return (
<Card>
<CardContent>
<Typography>{props.cardName}</Typography>
</CardContent>
<CardActions>
<Button size="small">SELECT</Button>
</CardActions>
</Card>
);
};
export default myCard;
现在,在父组件中,我想重用这个myCard组件,但有可能给它们中的任何一个自定义样式,例如边框(当我最终将代码重构为onClick时):
import React, { Component } from "react";
import Grid from "material-ui/Grid";
import styled from "styled-components";
import myCard from "./myCard";
const StyledCard = styled(myCard)`
/* border-style: ${props => (props.border ? "solid" : "none")}; */
border-style: solid !important;
border-width: 5px;
width: 180px;
`;
class cardSelect extends Component {
render() {
return (
<div>
<Grid container spacing={24}>
<Grid item xs={12}>
<Grid container justify="center">
<Grid item>
<StyledCard
cardName="Bronze"
/>
</Grid>
<Grid item>
<StyledCard
cardName="Silver"
/>
</Grid>
<Grid item>
<StyledCard
cardName="Gold"
/>
</Grid>
</Grid>
</Grid>
</Grid>
</div>
);
}
}
export default cardSelect;
我承认,我发现样式组件文档相当差。并且只有一种引用这种情况,它建议将className prop传递给组件。但是我并不是真正理解这个概念。
答案 0 :(得分:1)
将带有符号的道具传递到{...props}
卡组件。
import React from "react";
import Card, { CardActions, CardContent } from "material-ui/Card";
import Button from "material-ui/Button";
import Typography from "material-ui/Typography";
const myCard = props => {
return (
/**Here, pass the props with spread notation */
<Card {...props}>
<CardContent>
<Typography>{props.cardName}</Typography>
</CardContent>
<CardActions>
<Button size="small">SELECT</Button>
</CardActions>
</Card>
);
};
export default myCard;
实际上,当你将任何道具传递给组件时,传播道具会做什么,它将成为组件的一部分。
答案 1 :(得分:0)
我通过试验和错误找到答案。无法在任何地方找到这个解决方案(至少是整体的),所以对于后人和他人的利益,这就是我解决它的方式。
解决方案只是将 className 道具传递给 myCard 组件,如下所示:
const myCard = props => {
const { className } = props;
return (
<Card className={className}>
...
因此,通常,必须将className prop传递给要渲染的自定义组件。
答案 2 :(得分:0)
所以你真的需要将className
道具传递给Card
组件。样式组件为您生成类,为not-styled-components
应用样式只需要将className prop传递给组件...
const myCard = props => {
return (
<Card className={props.className}>
<CardContent>
<Typography>{props.cardName}</Typography>
</CardContent>
<CardActions>
<Button size="small">SELECT</Button>
</CardActions>
</Card>
);
};