在React中使用Styled Components创建样式的子组件没有生效

Question

我正在深入学习React，并且正在尝试使用styled components创建一个Modal组件。我的目标是实现类似Framer Motion的motion.div效果，但使用styled components来实现。

到目前为止，我已经构建了基础结构，工作得很好：

"use client";

export default function Modal({ children }: { children?: ReactNode }) {
  return {children};
}

Modal.Item = function ({ children }: { children?: ReactNode }) {
  return (
    
      {children}
    
  );
}

这个代码已经很好地完成了任务！但是当我尝试使用styled-components自定义样式时，如下所示：

export const CustomModalItem = styled(Modal.Item)`
  background-color: red;
`;

看起来样式并未生效。🤔 我猜我在实现过程中遗漏了某些东西。任何建议或指导都将非常受欢迎！同时，我也乐于接受任何关于如何使代码变得更好的提示。非常感谢您的帮助！🙌

"dependencies": {
  "next": "latest",
  "react": "^18",
  "react-dom": "^18",
  "styled-components": "^6.1.1"
}

Pedro Lobito · Answer

styled-components默认不支持复合组件。您在CustomModalItem中定义的样式不会直接应用到Modal.Item组件上。

要实现预期效果，您可以将样式作为props传递给Modal.Item组件，并在其内部的styled组件中应用这些样式。以下是一个示例：

import styled from 'styled-components';
import { ReactNode } from 'react';

const ModalStyled = styled.div`
  /* 您的Modal样式放在这里 */
`;

const ModalItemStyled = styled.div`
  /* 您的默认Modal.Item样式放在这里 */

  /* 您可以根据props添加额外的样式 */
  background-color: ${(props) => (props.customBackground ? 'red' : 'transparent')};
`;

export const Modal = ({ children }: { children?: ReactNode }) => {
  return {children};
};

Modal.Item = function ({ children, ...props }: { children?: ReactNode; customBackground?: boolean }) {
  return {children};
};

export const CustomModalItem = styled(Modal.Item)`
  /* 针对CustomModalItem的附加样式 */
`;

在上述示例中，ModalItemStyled组件接受一个名为customBackground的prop，背景颜色根据该prop设置。这样，在使用CustomModalItem时，您可以传入customBackground prop。

您可以这样使用它：

import { Modal, CustomModalItem } from 'your-path';

const MyComponent = () => {
  return (
    
      默认Modal Item
      具有红色背景的Custom Modal Item
    
  );
};

mmcdole · Answer

通过添加className属性已解决 :tada: