样式组件为自定义组件添加样式

Question

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

1. 这是我的自定义组件

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

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

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

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>

Answer 2

棘手的部分是添加

classname

：

const Component = ({className}) => (
    <div className={className}><Component /></div>
);

然后它应该可以工作