Блог

Я пытаюсь (безуспешно) передать одно значение цвета от родительского элемента дочернему элементу, используя styled-components . Если цвет передан правильно, фоном должен быть цвет, который передается. Остальное зеленое. Что бы я ни делал, цвет фона зеленый, чего мне здесь не хватает?

Родительский:

 function App() {
  return (
    <div>
      <Article color="red"/>
    </div>
  );
}
 

Дочерний элемент:

 const MainContetnt = styled.div`
    background-color: ${props => props.color ?? "green"};
    flex: 1;
`;
const Article = (props) => {
    return (
        <MainContetnt>
            Main content
        </MainContetnt>
)
};
 

Реквизит не будет автоматически передаваться стилизованному компоненту, вам все равно придется делать это обычным способом:

 const Article = (props) => {
    return (
        <MainContetnt color="props.color">
            Main content
        </MainContetnt>
    )
};