styled(MyComponent) 渲染MyComponent，但没有额外的样式[重复]。

Question

这个问题在这里已经有了答案:

添加类到样式组件 (1个答案)

封闭 19天前.

我有2个React的组件是使用styled-component。第一个叫 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 的红色边框。

然后我试着在另一个组件中渲染这个组件（叫做 App)使用stylled-components styled() 功能。

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 是没有考虑到。我的标题一直是黑色的。

这里是链接到 代码和盒子.

我是不是遗漏了什么？styled() 函数？

Answer 1

你需要通过 className 道具。

见 风格化普通React组件.

如果您使用 styled(MyComponent) 符号和 MyComponent 不会使传入的 className 榰 那么就不会应用任何样式.

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