使用样式组件来设置我自己的React组件的样式

时间:2018-03-13 07:10:10

标签: css reactjs material-ui 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;

我承认,我发现样式组件文档相当差。并且只有一种引用这种情况,它建议将className prop传递给组件。但是我并不是真正理解这个概念。

3 个答案:

答案 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>
  );
};