使用 styled-components 设置我自己的 React 组件的样式答案

【问题标题】：Using styled-components to style my own React components使用 styled-components 设置我自己的 React 组件的样式
【发布时间】：2018-08-21 08:34:34
【问题描述】：

我正在尝试使用 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传递给组件。但是我并没有真正理解这个概念。

【问题讨论】：

嗨，你能在样式-组件-网站回购上打开一个问题吗？找出您遇到的问题并改进文档会很棒
好的，我会在他们的 github 上记录我的发现

标签： css reactjs material-ui styled-components

【解决方案1】：

所以你真的需要将className 属性传递给Card 组件。 styled-components 为您生成类，为 not-styled-components 应用样式只需将 className 属性传递给组件...

const myCard = props => {
  return (
    <Card className={props.className}>
      <CardContent>
        <Typography>{props.cardName}</Typography>
      </CardContent>
      <CardActions>
        <Button size="small">SELECT</Button>
      </CardActions>
    </Card>
  );
};

【讨论】：

【解决方案2】：

将带有符号的道具传递给您的{...props} Card 组件。

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;

实际上，当您将任何道具传递给组件时，这个传播道具会做什么，它将成为组件的一部分。

【讨论】：

【解决方案3】：

我通过反复试验找到了答案。在任何地方都找不到这个解决方案（至少是整体的），所以为了后代和他人的利益，这就是我解决它的方法。

解决方案是简单地将 className 属性传递给 myCard 组件，如下所示：

const myCard = props => {
  const { className } = props;
  return (
    <Card className={className}>
...

因此，一般来说，必须将 className 属性传递给您要呈现的自定义组件。

【讨论】：