Package Exports
- styled-style
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-style) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
styled-style
css modules like styled-components
Why?
styled-components are wonderful!!! However, if there are many existing css, it can not be transferred immediately. styled-style can be transferred step by step. You can use readable components immediately.
Install
$ yarn add styled-styleUsage
styles.module.css
.center {
display: flex;
justify-content: center;
align-items: center;
}
.btn {
border-radius: 3px;
padding: 0.25em 1em;
margin: 0 1em;
background: transparent;
color: palevioletred;
border: 2px solid palevioletred;
}
.primary {
background: palevioletred;
color: white;
}import { styledStyle } from 'styled-style'
import styles from './styles.module.css'
const { div, button } = styledStyle(styles)
const Center = div('center')
const Button = button('btn')
const PrimaryButton = button(['btn', 'primary'])
render(
<Center>
<Button>Normal Button</Button>
<PrimaryButton>Primary Button</PrimaryButton>
</Center>
)Passed props
const Button = button(['btn', p => p.color === 'primary' && 'primary'])
render(
<div>
<Button>Normal Button</Button>
<Button color="primary">Primary Button</Button>
</div>
)API
styledStyle(styles: {[key: string]: string})
Examples
Contributors
Thanks goes to these wonderful people (emoji key):
 akameco 💻 📖 ⚠️ 🚇 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © akameco