Как стилизовать дочерний компонент React в родительском компоненте React?

Question

Если у меня есть дочерний компонент, подобный этому:

const Div = styled.div`
  display: inline-block;
`;
const Div = styled.button`
  display: block;
  background-color: red;
  margin-left: auto;
  margin-right: auto;
`;
export default class Child extends React.Components{
  render(){
    return <Div><Button>Test</Button></Div>;
  }
}

И затем я хочу добавить стиль к родительскому компоненту следующим образом:

const Div = styled(Child)`
  margin-top: 10px;
`;
export default class Parent extends React.Components{
  render(){
    return <Child/>;
  }
}

Итак, я думаю, это неправильный подход к этому? так есть ли другой путь?

Answer 1

Ответ заключается в добавлении свойства className в родительский компонент и применении их к внешнему элементу дочернего класса. Тогда это работает. Это описано здесь в Документах по стилизованным компонентам: https://styled-components.com/docs/advanced#styling -нормально-реагирующие компоненты

Answer 2

Я новичок, чтобы реагировать, и это может быть очевидно, но почему бы вам не использовать встроенный стиль непосредственно на родительском?

    const parentStyle = {
      margin-top: "10px"
    }
    export default class Parent extends React.Components{
      render(){
        return <Child style={parentStyle}/>;
      }
    }