React style Components: ReferenceError:在初始化之前不能访问

Question

SharedButton是我的应用程序中按钮的基本样式，它在组件之间共享。我试图覆盖这个按钮的样式内MyComponent。

我得到以下错误时，myComponent挂载:ReferenceError: Cannot access 'SharedButton' before initialization.

请注意，如果我不从不同的文件导入SharedButton，即:如果我在MyComponent&quot中定义它，我不会得到错误。如何解决这个问题?

shared.ts

import styled from "styled-components";
export const SharedButton = styled.button`
border: 1px solid red;
color: #1c101e;
font-size: 14px;
`;

myComponent.ts

import { SharedButton } from "./shared";
import styled from "styled-components";
const MyComponentButton = styled(SharedButton)`
float: right;
`;
const MyComponent = () => {
return <MyComponentButton> TEST </MyComponentButton>
}

Answer 1

尝试在sharets中放置MyComponentButton样式导出到myComponent.ts。沙箱示例

shared.ts

import styled from "styled-components";
export const SharedButton = styled.button`
border: 1px solid red;
color: #1c101e;
font-size: 14px;
`;
export const MyComponentButton = styled(SharedButton)`
float: right;
`;

myComponent.ts

import { MyComponentButton } from "./shared";
const MyComponent = () => {
return <MyComponentButton> TEST </MyComponentButton>
}

第二种方法，在style -components

中添加一些道具shared.ts

import styled, { css } from "styled-components";
export const SharedButton = styled.button`
border: 1px solid red;
color: #1c101e;
font-size: 14px;
${({ floatRight }) =>
floatRight &&
css`
float: left;
`}
`;

myComponent.ts

import { SharedButton } from "./shared";

export const MyComponent = () => {
return <SharedButton floatRight> TEST </SharedButton>;
};