Modify css react component with styled-component - reactjs

Question

I am consuming some component from library which are not in my project repo. Since I am using styled-component to develop my own component. I want to do little modification on component which I am consuming from other library without touching there code base. Here is little example of what I am trying to achieve but none of following style is getting applied to CustomCom
UI Library
const CustomCom = ()=>{
return (
<div>Child</div>
);
}
My Repo
export default styled(CustomCom)`
height: 20px;
background: green;
`;

Answer 1

This is only possible if the component passes className to the DOM element, per the styled-components documentation
The styled method works perfectly on all of your own or any
third-party components, as long as they attach the passed className
prop to a DOM element.
https://www.styled-components.com/docs/basics#styling-any-components
Here's some sample code, which of course modifies the Library code, which I understand you can't do, but you could fork the library and do it if you want.
const CustomCom = ({className})=>{
return (
<div className={className}>Child</div>
);
}
class App extends Component {
render() {
const MyElem = styled(CustomCom)`
height: 20px;
background: green;
`
return (
<MyElem />
);
}
}

Answer 2

Try below
export const newCustom = styled(CustomCom)`
height: 20px;
background: green;
`;
Now use this custom component
<newCustom />
If you want to extend existing HTML tags you can do this:
export const newCustom = styled.div`
height: 20px;
background: green;
`;