样式-组件向自定义组件添加样式。

Question

我想在styled-components库的帮助下将样式添加到自定义组件中。我在StackOverflow上发现了一些类似的问题，并给出了答案，但似乎对我不起作用。我做了这样的事：

1. 这是我的自定义组件

const ComponentStyledBox = styled.div`
  color: red;
`;

const ComponentStyled = () => (
  <ComponentStyledBox>Component With StyledComponents</ComponentStyledBox>
);

1. 在这里，我尝试使用我的自定义组件并向它添加一些样式。

const ComponentStyledWrapper = styled(ComponentStyled)`
  background-color: green;
`;

export default function App() {
  return (
    <div>
      <ComponentStyledWrapper />
    </div>
  );
}

因此，我没有绿色背景。只有红色短信。如果我使用的不是样式化的自定义组件，而是一个通过CSS以普通方式添加样式的组件，情况也是一样的。我做错什么了？

为了您的方便，这里有一个CodeSandbox

提前感谢！

Answer 1

造成这个问题的原因是：

const ComponentStyled = () => (
  <ComponentStyledBox>Component With StyledComponents</ComponentStyledBox>
);

您已经定义了一个名为ComponentStyled的新组件，它不能使用样式。试一试(在App.styles.tsx中)：

import { ComponentStyledBox } from "./components/ComponentStyled/ComponentStyled.styles";

export const ComponentStyledWrapper = styled(ComponentStyledBox)`
  background-color: green;
`;

ComponentStyledBox是时尚的，所以你会得到绿色的背景。

编辑(回复@zakharov.arthur的评论)：如果真的想要一个带有硬编码子组件的自定义组件(您确定这是您想要的吗？)，您可以通过公开ComponentStyledBox的道具使您的自定义组件风格成为可能：

// I haven't actually tried this but it should work.
const ComponentStyled = (props: Omit<Parameters<ComponentStyledBox>[0], 'children'>) =>
  <ComponentStyledBox {...props}>Component With StyledComponents</ComponentStyledBox>