reactjs - 反应样式的组件不从属性传递道具

Question

我正在尝试（未成功）使用样式组件将单个颜色值从父级传递给子级。如果颜色传递正确，则背景应该是传递的颜色。其他绿色。无论我做什么，背景颜色都是绿色的我在这里错过了什么？

家长：

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>
)
};

标签： reactjsstyled-components

Answer 1

道具不会自动传递给样式化的组件，您仍然必须以通常的方式进行：

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