Based on Rebass these components can be used in React projects with styled components.
First, install the package:
npm i midnight-shadow
import React from 'react'
import { Flex, Box, Text } from 'midnight-shadow'
export default props =>
<Box width={["100%", "50%", "33%"]}>
<Text mb="20px" textAlign="center">Hello</Text>
<Flex bg="#bbeeff" p="10px" justifyContent="center" alignItems="center>Friend</Flex>
</Box>
There are three UI components: Flex, Box, and Text
Which mostly work like the Rebass versions:
| Prop name | CSS val |
|---|---|
| width | 'width' |
| height | 'height' |
| minHeight | 'min-height' |
| maxHeight | 'max-height' |
| minWidth | 'min-width' |
| maxWidth | 'max-width' |
| px | 'padding-left' |
| px | 'padding-right' |
| py | 'padding-top' |
| py | 'padding-bottom' |
| pt | 'padding-top' |
| pb | 'padding-bottom' |
| pl | 'padding-left' |
| pr | 'padding-right' |
| m | 'margin' |
| mx | 'margin-left' |
| mx | 'margin-right' |
| my | 'margin-top' |
| my | 'margin-bottom' |
| mt | 'margin-top' |
| mb | 'margin-bottom' |
| ml | 'margin-left' |
| mr | 'margin-right' |
| bg | 'background' |
| position | 'position' |
| borderRadius | 'border-radius' |
| textAlign | 'text-align' |
| textTransform | 'text-transform' |
| textDecoration | 'text-decoration' |
| flex | 'flex' |
| flexDirection | 'flex-direction' |
| flexWrap | 'flex-wrap' |
| justifyContent | 'justify-content' |
| alignItems | 'align-items' |
| alignContent | 'align-content' |
| fontFamily | 'font-family' |
| fontSize | 'font-size' |
| fontWeight | 'font-weight' |
| lineHeight | 'line-height' |
| letterSpacing | 'letter-spacing' |
| color | 'color' |
| sx | general styles |
Each prop takes either a string or an array of strings. Arrays are used for breakpoints:
const breakpoints = {
sm: '576px',
md: '768px',
lg: '992px',
}
eg.,
<Box mx={["30px", "50px", "100px"]}>...</Box>
General styles can be added like below:
<Text sx={{'letter-spacing': '0.02rem'}}>...</Text>
You can also pass an array of values for breakpoints into general styles like so:
<Text fontSize={['32px', '44px', '64px']} sx={{'letter-spacing': ['0', '0.01rem', '0.02rem']}}>...</Text>
You can pass an as prop through each Ui component
<Text as="h1">...</Text>
<Flex as="nav">...</Flex>
<Box as="section">...</Box>