Created
July 13, 2021 00:25
-
-
Save jonasantonelli/78affb55a5c448202fde42d9e7f60f04 to your computer and use it in GitHub Desktop.
Styled Components - Switching and customizing the component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | |
| ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment