How do you convert two classnames together into styled-components?-CodePudding

I'm trying to convert my css to styled-components

.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;
}

In this how do I write the styled-components?

I have came across something about what I could do for first-child and last-child but even that too had mistakes.

CodePudding user response：

Try This:

{
  "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(\n        #1845ad,\n        #23a2f6\n    )",
    "left": "-80px",
    "top": "-80px"
  },
  "shape_last_child": {
    "background": "linear-gradient(\n        to right,\n        #ff512f,\n        #f09819\n    )",
    "right": "-30px",
    "bottom": "-80px"
  }
}

There is a website, which convert css style to react style: https://staxmanade.com/CssToReact/

CodePudding user response：

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

then

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

CodePudding user response：

How about this. Create separate styles for Background and Shape. Then you create a union style, where you put styles from Background and Shape add whatever styles you want (it will override the previous styles)

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%;
`;