javascript - styled(MyComponent) 呈现 MyComponent 但没有其他样式

Question

我有 2 个使用样式组件的 React 组件。第一个称为Divrender 只是一个简单的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带有红色边框的 a 。

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

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带有红色边框的 a，其中包含 my h1andh2但未color: red考虑在内。我的标题保持黑色。

这是代码框的链接。

我是否错过了该styled()功能的某些内容？

标签： javascriptreactjsstyled-components

Answer 1

你需要通过className道具。

请参阅设置普通 React 组件的样式。

如果您使用styled(MyComponent)符号并且MyComponent不渲染传入的className道具，则不会应用任何样式。

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