让使用您喜欢的CSS框架创建React组件变得更加容易
让使用您喜欢的CSS框架创建React组件变得更加容易
React CSS样式相关
共42Star
详细介绍
classnamed-components
Do you ever wish there was something like styled-components but for @tachyons_css, @tailwindcss and other #functionalCSS frameworks? There is now!
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 <section
// className={`px-6 py-4 bg-white ${className}`}
// {...props}
// />
// }
// You can use props to have dynamic class names
const MyButton = classNamed('button')`
btn shadow
${props => ({
big: 'btn-lg',
small: 'btn-sm',
}[props.size])}
`
const MyExample = (props) => (
<MySection/>
<MyButton size="big" />
<MyButton size="small" className="ml-2" />
<MySection/>
)
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<myButtonProps>
API
classNamed is the default export
prop | type | default | description |
---|---|---|---|
as | React.Component or string | none | replacement base component |
Examples
License
MIT © Hermanya