Styled Components - Switching and customizing the component

styled-component-switching-customizing.jsx

import styled, { css } from 'styled-components';

/*
* Switching <ul> element to <ol> and styling  
*/
const UnorderedList = styled.ul`
  list-style: circle;
  li {
    text-transform: uppercase;
    margin-bottom: 8px;
  }
`;

const OrderedList = styled(UnorderedList).attrs({
  as: "ol"
})`
  list-style: decimal-leading-zero;
`

export default () => (
  <OrderedList>
    <li>...<li>
    <li>...<li>
  </OrderedList>
)