Reach UI

Reach UI seeks to become the accessible foundation of your React-based design system.

Styling a Reach component feels similar to styling any native element. There are no themes and you don't have to prescribe to any specific approach to styling. There are some basic styles to make the components usable off-the-shelf, but you can override and add to them with stylesheets, styled components, emotion, glamor, whatever you want.

// Emotion and styled components
let YourMenuList = styled(MenuList)`
  border: solid 2px black;
  background: black;
  color: red;
  > [data-reach-menu-item][data-selected] {
    background: red;
    color: white;
  }
`

// normal className
<MenuList className="yep"/>

// normal style
<MenuList style={sure}/>

// glamor CSS prop
<MenuList css={absolutely}/>