Как объединить два стилевых компонента, которые находятся в разных базовых компонентах, но имеют похожие стили?

Question

Я пытаюсь объединить эти два стилевых компонента в один.

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

Answer 1

Использовать интерполяцию строк:

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