我正在尝试使用 styled-components 来设置我自己的子组件的样式。
例如,我创建了一个名为 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;
我承认,我发现 styled-components 文档相当糟糕。并且只有一个提到这种情况,建议将 className prop 传递给组件。但是我并没有真正理解这个概念。
最佳答案
因此您确实需要将 className
属性传递给 Card
组件。 styled-components 为您生成类,要为 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>
);
};
关于css - 使用 styled-components 来设置我自己的 React 组件的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49250209/