如何在具有typescript的样式组件中使用backgroundImage-css

Question

我有以下样式的组件

const StyledBackIcon = styled.div(imgsrc => ({
backgroundImage: url`${imgsrc}`
}))

现在，它抛出了一个url的错误编译。

如何解决这个问题？感谢

Answer 1

而不是

const StyledBackIcon = styled.div(imgsrc => ({
backgroundImage: url`${imgsrc}`
}))

写入

const StyledBackIcon = styled.div(imgsrc => ({
backgroundImage: `url${imgsrc}`
}))

请参阅backtic在url之前开始。

Answer 2

虽然样式化组件确实支持使用JS对象而不是字符串编写CSS，例如下面的示例-在文档中从这里引用：

const PropsBox = styled.div(props => ({
background: props.background,
height: '50px',
width: '50px'
}));

我认为在这种情况下真的没有必要吗？我在这里尝试了这两种：沙盒链接。沙箱中的示例使用CSS背景属性，这是一个包含背景图像属性的简写属性。

const StyledButton = styled.button`
height: 50px;
width: 50px;
background: white url('${(props) => props.icon}') no-repeat center/90%;
`;
export const Button = ({ img, handleClick }) => (
<StyledButton onClick={handleClick} icon={img} />
);

祝你好运！