我是新来的人,我正在实现一个名为 styled-components 的第三方程序包,以便与我的应用程序中的CSS样式一起使用
使用 styled-components 包需要我编写通常包含CSS和javascript(混合)的代码。
例如
//para style
const StyledPara = styled.p`
color: green;
@media (max-width: 500px) {
color: red;
font-weight: bold;
font-size: 40px;
}
`;
//div style
const StyledDiv = styled.div`
width: 400px;
margin: 16px auto;
border: 1px solid #eee;
box-shadow: 0 2px 3px #ccc;
padding: 40px;
`;
**//Button style**
const ButtonStyle = styled.button`
padding: 8px;
font: inherit;
border: 2px solid black;
cursor: pointer;
background: ${(props) => (props.colorInfo ? "red" : "green")};
color: white;
&:hover {
background-color: ${(props) =>
props.colorInfo ? "#ffcccb" : "lightgreen"};
}
`;
每当我在JSX中编写诸如媒体查询等CSS样式时,我都无法在VS代码编辑器中获得自动完成建议。
有什么办法可以解决这个问题?任何帮助,将不胜感激。谢谢