Расширяет компонент и добавляет новое значение к свойству, которое уже имеет значение

Question

Мне интересно, есть ли способ сделать это с помощью styled-components:

Предположим, у нас есть стилизованная кнопка в какой-то библиотеке, которую я использую с этими стилями:

/* code from the library */

const Button = styled.button`
  box-shadow: 0px 0px 3px #000;
`;

Теперь мне нужно создать еще одну стилизованную кнопку, которая расширяет первую (полученную из библиотеки) и добавляет новое значение к текущему box-shadow, поэтому, если я сделаю это:

/* code from my app */

import { Button } from 'foo'; 

const NewButton = styled(Button)`
  box-shadow: 10px 10px 5px #ccc;
`;

Я переопределю box-shadow, окончательное значение будет box-shadow: 10px 10px 5px #ccc;.

Есть ли способ добавить новое значение в существующее свойство?

Для моего NewButton box-shadow будь таким: box-shadow: 0px 0px 3px #000, 10px 10px 5px #ccc;?

Спасибо, ребята!