search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.05k stars 586 forks source link

How can I select first bmBurgerBars? #331

Closed mhabel closed 5 years ago

mhabel commented 5 years ago

I tried like this:

var styles = { bmBurgerButton: { position: 'fixed', width: '36px', height: '30px', left: '36px', top: '36px' }, bmBurgerBars: { background: '#373a47' }, 'bmBurgerButton>span:firstChild': { backgorund: #00FF00 }, bmBurgerBarsHover: { background: '#a90000' }, bmCrossButton: { height: '24px', width: '24px' }, bmCross: { background: '#bdc3c7' }, bmMenuWrap: { position: 'fixed', height: '100%' }, bmMenu: { background: '#373a47', padding: '2.5em 1.5em 0', fontSize: '1.15em' }, bmMorphShape: { fill: '#373a47' }, bmItemList: { color: '#b8b7ad', padding: '0.8em' }, bmItem: { display: 'inline-block' }, bmOverlay: { background: 'rgba(0, 0, 0, 0.3)' } }

<Menu styles={ styles } />

but doesn't work:

Do you know a better solution? Thanks a lot

negomi commented 5 years ago

Hi @mhabel, this isn't possible with inline styles, see https://stackoverflow.com/questions/25646683/how-to-add-nth-child-style-in-inline-styling

You would have to use CSS. Also watch out for your typo 'backgorund'. Hope that helps!