You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
698 B
34 lines
698 B
6 years ago
|
import React from 'react'
|
||
|
|
import { MenuItem as MenuItemBase } from 'rc-menu'
|
||
|
|
import system from '@rebass/components'
|
||
|
|
import styled from 'styled-components'
|
||
|
|
|
||
|
|
const SystemMenuItem = system(
|
||
|
|
{
|
||
|
|
extend: MenuItemBase,
|
||
|
|
py: 2
|
||
|
|
},
|
||
|
|
'space'
|
||
|
|
)
|
||
|
|
|
||
|
|
const StyledMenuItem = styled(SystemMenuItem)`
|
||
|
|
list-style-type: none;
|
||
|
|
&.rc-menu-item-active {
|
||
|
|
color: ${props => props.theme.colors.lightningOrange};
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
&.rc-menu-item-selected {
|
||
|
|
color: ${props => props.theme.colors.lightningOrange};
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @render react
|
||
|
|
* @name MenuItem
|
||
|
|
* @example
|
||
|
|
* <MenuItem>MenuItem item 1</MenuItem>
|
||
|
|
*/
|
||
|
|
const MenuItem = props => <StyledMenuItem {...props} />
|
||
|
|
|
||
|
|
export default MenuItem
|