[英]styled components in functional component does not apply style to component
[英]styled(Component) does not apply styles on functional component
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>
);
您需要将 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>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.