Модифицируйте css реагирующий компонент с помощью styled-component

Question

Я потребляю какой-то компонент из библиотеки, которого нет в моем репозитории проекта.Поскольку я использую styled-component для разработки собственного компонента.Я хочу сделать небольшую модификацию для компонента, который я потребляю из другой библиотеки, не касаясь там кодовой базы.Вот небольшой пример того, чего я пытаюсь достичь, но ни один из следующих стилей не применяется к CustomCom

UI Library

const CustomCom = ()=>{
  return (
    <div>Child</div>
  );
}

MyРепо

export default styled(CustomCom)`
  height: 20px;
  background: green;
`;

Answer 1

Попробуйте ниже

export const newCustom  = styled(CustomCom)`
height: 20px;
background: green;
`;

Теперь используйте этот пользовательский компонент

<newCustom   />

Если вы хотите расширить существующие теги HTML, вы можете сделать это:

export const newCustom  = styled.div`
height: 20px;
background: green;
`;

Answer 2

Это возможно только в том случае, если компонент передает className элементу DOM согласно styled-components документации

Стилизованный метод отлично работает на всех ваших собственных или любых сторонних компонентах.до тех пор, пока они присоединяют переданную реквизит className к элементу DOM.

https://www.styled -components.com / docs / basics # styling-any-components

Вот некоторый пример кода, который, конечно, изменяет код библиотеки, но я понимаю, что вы не можете этого сделать, но вы можете разветвить библиотеку и сделать это, если хотите.

const CustomCom = ({className})=>{
  return (
    <div className={className}>Child</div>
  );
}

class App extends Component {
  render() {
    const MyElem = styled(CustomCom)`
      height: 20px;
      background: green;
    `
    return (
      <MyElem />
    );
  }
}