让使用您喜欢的CSS框架创建React组件变得更加容易
让使用您喜欢的CSS框架创建React组件变得更加容易
classnamed-components
Do you ever wish there was something like styled-components but for @tachyons_css, @tailwindcss and other #functionalCSS frameworks? There is now!
Website with examples
Install
npm install classnamed-components
Usage
import * as React from 'react'import classNamed from 'classnamed-components'const MySection = classNamed("section")`px-6 py-4 bg-white`;// INSTEAD OF// const MySection = ({className, ...props}) => {// return // }// You can use props to have dynamic class namesconst MyButton = classNamed('button')` btn shadow ${props => ({ big: 'btn-lg', small: 'btn-sm', }[props.size])}`const MyExample = (props) => (
Typescript
type myButtonProps = { size?: 'big' | 'small'}const MyButton = classnamed('button')` btn shadow ${(props: myButtonProps) => ({ big: 'btn-lg', small: 'btn-sm', }[props.size || ''] || '')}` as React.SFC
API
classNamed is the default export
| prop | type | default | description |
|---|---|---|---|
| as | React.Component or string | none | replacement base component |
Examples
tailwindtachyonsbootstrap
License
MIT © Hermanya
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~