styled(Component) 不在功能组件上应用样式

Question

1。我有一个用 styled-components

编写的组件

2。在新的 Styled 组件中调用该组件

3。附加样式

结果：未应用样式

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属性传递给它的容器，否则不会应用样式：

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>
);

styled(Component) 不在功能组件上应用样式

styled(Component) does not apply styles on functional component

javascript

reactjs

styled-components