React / Styled-Components Example : Design System

import styled from "styled-components" /** * The problem heading are multiple level (1-6) * how to refactor my code * The simple way is create for each heading level => */ // re-usable heading with small code export const Heading = ({level,color,children,...props})=>{ // refactor heading level const StyledHeading = styled[`h${level}`]` color:${(color)=>color}; ` return( <StyledHeading color={color} {...props} >{children} </StyledHeading>  ) }