用styled component可以嵌套

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

// 顶部导航子组件
const list = [
    {id:0,name:'免费课程',url:'https://www.imooc.com/course/list'},
    {id:1,name:'职业路径',url:'https://class.imooc.com/'},
    {id:2,name:'实战',url:'https://coding.imooc.com/'},
    {id:3,name:'猿问',url:'https://www.imooc.com/wenda'},
    {id:4,name:'手记',url:'https://www.imooc.com/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(https://www.imooc.com/static/img/common/new.png) no-repeat;
    }
`

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

export default Head

可以尝试用className写样式