React Styled Components generating excessive css - reactjs

Question

Take the following example:
import * as React from 'react';
import styled from 'styled-components';
const Ball = styled.div`
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
background: radial-gradient(peachpuff 0% 8%, rgb(243, 169, 105) 10% 55%, rgb(192, 125, 66) 57% 100%) no-repeat;
background-size: 150% 150%;
background-position: center;
background-position-x: 87%;
background-position-y: 87%;
`;
const SmallBall = styled(Ball)`
width: 50px;
height: 50px;
`;
export default () => (
<>
<Ball name="Ball"></Ball>
<SmallBall name="SmallBall"></SmallBall>
</>
)
Here's the markup that's being generated:
If I were to write out the CSS I'd expect to be generated, it'd probably look something like this:
.sc-cHGsZl {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
background: radial-gradient(peachpuff 0% 8%, rgb(243, 169, 105) 10% 55%, rgb(192, 125, 66) 57% 100%) no-repeat;
background-size: 150% 150%;
background-position: center;
background-position-x: 87%;
background-position-y: 87%;
}
.sc-cHGsZl.bmZbgS {
width: 50px;
height: 50px;
}
Instead what's generated is:
and
How can I get styled-components to output more concise CSS where common properties are grouped and not unnecessarily repeated?

Answer 1

You can add classNames in styled-component.
import * as React from 'react';
import styled from 'styled-components';
const Ball = styled.div.attrs({ className: "ball" })`
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
background: radial-gradient(peachpuff 0% 8%, rgb(243, 169, 105) 10% 55%, rgb(192, 125, 66) 57% 100%) no-repeat;
background-size: 150% 150%;
background-position: center;
background-position-x: 87%;
background-position-y: 87%;
`;
const SmallBall = styled(Ball).attrs({ className: "small-ball" })`
width: 50px;
height: 50px;
`;
export default () => (
<>
<Ball name="Ball"></Ball>
<SmallBall name="SmallBall"></SmallBall>
</>
)

Answer 2

I think a simpler approach would be to make a reusable and flexible component that you can change via passing in properties OR by using style overrides (also, it appears like this issue was reported back in 2018). While it doesn't solve the duplicate class issue, it at least mitigates it.
Working example:
components/Ball/index.js
import styled from "styled-components";
export default styled.div`
width: ${({ width }) => width || "100px"};
height: ${({ height }) => height || "100px"};
border: 1px solid black;
border-radius: 50%;
background: radial-gradient(
peachpuff 0% 8%,
rgb(243, 169, 105) 10% 55%,
rgb(192, 125, 66) 57% 100%
)
no-repeat;
background-size: 150% 150%;
background-position: center;
background-position-x: 87%;
background-position-y: 87%;
`;
index.js
import React from "react";
import { render } from "react-dom";
import { Ball, Container } from "./components";
const App = () => (
<Container>
<Ball height="50px" width="50px" />
<Ball />
<Ball style={{ height: 200, width: 200 }} />
</Container>
);
render(<App />, document.getElementById("root"));
Ball # 1
Ball # 2
Ball # 3