How to merge two styled-components which are in different base components but have similar styles?

Question

I am trying to merge these two styled-components into one.

const CustomInput = styled.input`
    width: 150px;
    height: 100%; 
`;
const CustomTextarea = styled.textarea`
    width: 150px;
    height: 100%; 
`;

Answer 1

Use string interpolation:

const sharedCSS = css`
  width: 150px;
  height: 100%; 
`
const CustomInput = styled.Input`
  ${sharedCSS}
`
const CustomTextarea = styled.textarea`
  ${sharedCSS}
`