                        課程
                    
                        /前端開發(fā)
                        
                            /React.JS
                        
                        /React實(shí)戰(zhàn)--打造畫廊應(yīng)用（上）

css in js用法？

在定義React組件的樣式時(shí)，用css in js的寫法可以定義當(dāng)前組件的樣式，但是當(dāng)各個(gè)組件之間有布局關(guān)系時(shí)，怎么用css in js來(lái)控制？

iters

2016-05-05

源自：React實(shí)戰(zhàn)--打造畫廊應(yīng)用（上） 3-2

關(guān)注問(wèn)題我要回答

900

操作

收起

2 回答

qq__842
2018-02-05

用styled component可以嵌套

import?React,?{?Component?}?from?'react'
import?styled?from?'styled-components'

//?頂部導(dǎo)航子組件
const?list?=?[
????{id:0,name:'免費(fèi)課程',url:'http://idcbgp.cn/course/list'},
????{id:1,name:'職業(yè)路徑',url:'https://class.imooc.com/'},
????{id:2,name:'實(shí)戰(zhàn)',url:'https://coding.imooc.com/'},
????{id:3,name:'猿問(wèn)',url:'http://idcbgp.cn/wenda'},
????{id:4,name:'手記',url:'http://idcbgp.cn/article'}
]

const?Nav?=?({className})?=>?(
????<ul?className={className}>
????????{
????????????list.map(n=>
????????????????<li?key={n.id}>
????????????????????<a?href={n.url}>{n.name}</a>
????????????????</li>
????????????)
????????}
????</ul>
)

const?StyleNav?=?styled(Nav)`
????display:flex;
????a?{
???????padding:?0?20px;
???????color:?#4D555D;
???????font-size:?16px;
???????line-height:?72px;
???????text-align:center;
???????transition:?background-color?.3s;
????}
????li:nth-of-type(2)?a:after?{
????????content:?'';
????????position:?relative;
????????display:?inline-block;
????????top:?-10px;
????????width:?16px;
????????height:?16px;
????????background:?url(http://idcbgp.cn/static/img/common/new.png)?no-repeat;
????}
`

class?Head?extends?Component?{
????render()?{
????????return?(
????????????<Header?id='Head'>
????????????????<StyleNav?className='topBarNav'/>
????????????</Header>
????????)
????}
}

export?default?Head