让使用您喜欢的CSS框架创建React组件变得更加容易

网友投稿 501 2022-11-03

让使用您喜欢的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

proptypedefaultdescription
asReact.Component or stringnonereplacement base component

Examples

tailwindtachyonsbootstrap

License

MIT © Hermanya

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Cabbage 一个基于AVFoundation的视频编辑框架,使用简单,易于扩展
下一篇:Laravel搜索的时候分页并携带参数
相关文章

 发表评论

暂时没有评论,来抢沙发吧~