如何将两个类名一起转换为样式化组件？答案

【问题标题】：How do you convert two classnames together into styled-components?如何将两个类名一起转换为样式化组件？
【发布时间】：2022-12-06 21:59:30
【问题描述】：

我正在尝试将我的 css 转换为样式组件

.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}
.shape:first-child{
    background: linear-gradient(
        #1845ad,
        #23a2f6
    );
    left: -80px;
    top: -80px;
}
.shape:last-child{
    background: linear-gradient(
        to right,
        #ff512f,
        #f09819
    );
    right: -30px;
    bottom: -80px;
}

在此如何编写样式组件？

我遇到了一些关于我可以为第一个孩子和最后一个孩子做些什么的事情，但即使那样也有错误。

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

尝试这个：

{
  "background": {
    "width": "430px",
    "height": "520px",
    "position": "absolute",
    "transform": "translate(-50%,-50%)",
    "left": "50%",
    "top": "50%"
  },
  "background__shape": {
    "height": "200px",
    "width": "200px",
    "position": "absolute",
    "borderRadius": "50%"
  },
  "shape_first_child": {
    "background": "linear-gradient(
        #1845ad,
        #23a2f6
    )",
    "left": "-80px",
    "top": "-80px"
  },
  "shape_last_child": {
    "background": "linear-gradient(
        to right,
        #ff512f,
        #f09819
    )",
    "right": "-30px",
    "bottom": "-80px"
  }
}

有一个网站，将css样式转换为react样式： https://staxmanade.com/CssToReact/

【讨论】：

【解决方案2】：

const component1 = styled.div`
 /// style 
`

然后

const component2= styled(component1 )`
/// style`

【讨论】：

【解决方案3】：

这个怎么样。为背景和形状创建单独的样式。然后创建一个联合样式，在其中放置背景和形状的样式+添加您想要的任何样式（它将覆盖以前的样式）

const Background = styled.div`
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
`;

const Shape = styled.div`
    &:first-child {
        background: linear-gradient(#1845ad, #23a2f6);
        left: -80px;
        top: -80px;
    }

    &:last-child {
        background: linear-gradient(to right, #ff512f, #f09819);
        right: -30px;
        bottom: -80px;
    }
`;

const BgWithShape = styled.div`
    ${Background}
    ${Shape}

    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
`;

【讨论】：