反应样式的组件不从属性传递道具答案

【问题标题】：React styled component not passing props from attribute反应样式的组件不从属性传递道具
【发布时间】：2021-03-12 10:44:12
【问题描述】：

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

父母：

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

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

Props 不会自动传递给样式化的组件，你仍然需要按照通常的方式进行：

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

【讨论】：