为什么样式化组件会生成对象？

Question

我有一些使用样式化组件的非常基本的代码：

import styled from 'styled-components';

const Test = () => <div>foo</div>;
const StyledTest = styled(Test)`
  border: 10px solid red;
`;
console.log(typeof StyledTest); // object!!!

问题是，最后一个console.log 行记录了object（不是function），当我尝试使用它时当然会导致错误。

当我尝试为库中的组件设置样式时也会发生这种情况：

import Modal from 'react-modal';
const StyledModal = styled(ReactModalAdapter)`
  border: 10px solid red;
`;
console.log(typeof StyledModal); // object!!!

我做错了什么？

Answer 1

样式组件元素的console.log 将始终是object。

为了您的代码正常工作，您需要将StyledTest 更改为：

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

并在Test中使用它：

const Test = () => <StyledTest>foo</StyledTest>;

首先，您需要设置样式，然后应用您正在创建的内容。

要像你一样创建，你在StyledTest中传递的参数应该是一个样式组件，所以如果你有类似的东西：

const Test = styled(({ ...rest }) => <div {...rest} />)`
  border: 10px solid red;
`;

const StyledTest = styled(Test)`
  border: 10px solid blue;
`;

在该示例中，Test 是一个样式组件元素，因此您可以对其进行编辑。