樣式化（組件）不適用於功能組件 styles

Question

1 . 我有一個用 styled-components 編寫的組件

2 . 在新的 Styled 組件中調用該組件

3 . 附上styles

結果：Styles 未應用

export const WarningBox = styled(InfoBox)`
${({ theme }) => css`
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  font-size: 12px;
  padding: 16px;
  border-radius: 4px;
  background-color: ${theme.colors.yellow[150]};
  border: 1px solid ${theme.colors.yellow[700]};

  a {
    font-family: Montserrat;
    font-weight: 500;
    color: ${theme.colors.blue[900]};
    margin-right: 15px;
  }
`}}
`;

這是我要自定義的信息框：

const Container = styled.div`
${({ theme }) => css`
  padding: 16px;
  width: 100%;
  min-height: 110px;
  border-radius: 4px;
  background-color: ${theme.colors.green[150]};
`}}
`;

...rest of the styled-components...

type InfoBoxProps = {
  title?: string;
  text?: string;
  icon?: React.ReactNode;
};

export const InfoBox: FC<InfoBoxProps> = ({
  title = '',
  text = '',
  icon,
  children,
}) => (
  <Container className="box-container">
    <Text>{text}</Text>
    {children}
  </Container>
);

Answer 1

您需要將 InfoBox 的 className 屬性傳遞給它的容器，否則將不會應用 styles：

type InfoBoxProps = {
  className?: string;
  title?: string;
  text?: string;
  icon?: React.ReactNode;
};

export const InfoBox: FC<InfoBoxProps> = ({
  className,
  title = '',
  text = '',
  icon,
  children,
}) => (
  <Container className={`box-container ${className}`}>
    <Text>{text}</Text>
    {children}
  </Container>
);