In my Component.tsx file, I am using the following template:
import {Foo} from 'external-stuff'
<Foo>
<p>bar</p>
</Foo>
The Foo component is designed to accept a className parameter.
const Foo = ({className, title}) => {
const Container = styled.div`
// some styles
`
const Title = styled.div`
border: 0;
`
const Content = styled.div`
margin: 10px;
`
return (
<Container className={className}>
<Title>{title}</Title>
<Content>{children}</Content>
</Container>
)
I would like to be able to apply custom styles to the Title and Content components within Component.tsx since I cannot edit Foo.tsx directly. For instance, I want to change the border style of Title to be 1px solid instead of the default 0.