Best way to override child styles in styled-components

Question

I have a Component and I want to override it's styles. I have used styled-components to build them.

My doubt is, how can one override styles of a child component.

I want to know better approach.

Example

 const Child = styles.div'
      font-size: '10px'
    '
    const Wrapper = styles.div'
      color: red
    '
const DummyComponent = () => (
  <Wrapper>
    <Child>Hello</Child>
  </Wrapper>
)

I want to change padding or margin or any other property of child.

What is the better approach. Using inline style or className. Or is there any better approach in styled-component to do this.

Using inline style

const DummyComponent = ({childStyles}) => (
  <Wrapper>
    <Child style={{...childStyles}}>Hello</Child>
  </Wrapper>
)

Using className

const DummyComponent = ({childClass}) => (
   <Wrapper>
       <Child className={childClass}>Hello</Child>
    </Wrapper>
)

Answer 1

I would recommend to use classNames to override the behaviors. you just need your rules stronger. tex:

const DummyComponent = ({childClass}) => (
   <Wrapper className="div--wrapper">
       <Child className="div--child">Hello</Child>
    </Wrapper>
)
// css
.div--wrapper .div--child{
  // override css go here
}