styled-component

Question

styled-component css提示怎么弄，好痛苦，网上查的一些插件安装了也无效

Answer 1

styled-components不是styled-component
先说有啥用：
1.可以让你在React组件中编写css样式，而不是单独引用css文件。
2.可以根据不同情况使用不同的样式
3.可以实现样式继承
4.可以让你的jsx更语义化
还有更多好处自己去官网看文档
再说怎么用：
比如列表不使用styled-components

<ul style={{backgroundColor:'red'}}>
    {this.state.list.map(item=>{
        return <li key={item.name} style={{color: item.value > 10 : 'red' : 'blue' }}>{item.name}</li>
    })}
</ul>

使用styled-components

import styled from 'styled-components'

const List = styled.ul`
    background-color: red;
`
const ListItem = styled.li`
    color: ${props=> props.value > 10 ? 'red' : 'blue'  };
`
function ListComponent(props){
    return <List>
        {props.list.map(item=>{
            return <ListItem key={item.name} value={item.value}>{item.name}</ListItem>
        })}
    </List>
}

Answer 2

试试这个插件vscode-styled-components