styled(MyComponent) 呈现 MyComponent 但没有其他样式 [重复]

Question

我有 2 个使用样式组件的 React 组件。第一个叫做 Div 的只是一个简单的 div （仅用于示例）：

import React from "react";
import styled from "styled-components";

export default function Div(props) {
  return <StyledDiv>{props.children}</StyledDiv>;
}

const StyledDiv = styled.div`
  border: 10px solid red;
`;

它正确渲染了带有红色边框的div。

然后我尝试使用 styled-components styled() 函数在另一个（称为App）中呈现这个组件：

import React from "react";
import styled from "styled-components";

import Div from "./Div";

export default function App() {
  return (
    <StyledApp>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </StyledApp>
  );
}

const StyledApp = styled(Div)`
  color: red;
`;

这里的结果是带有红色边框的div，其中包含我的h1 和h2，但color: red 没有考虑在内。我的标题一直是黑色的。

这是codesandbox的链接。

我是否遗漏了 styled() 函数中的某些内容？

Answer 1

你需要传递className 属性。

见styling normal React components。

如果您使用styled(MyComponent) 表示法并且MyComponent 不呈现传入的className 属性，则不会应用任何样式。

export default function Div({ className, children }) {
  return <StyledDiv className={className}>{children}</StyledDiv>;
}