You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using ClassNamesBind, you should be able to pass a string class straight through to the component. In all examples you do this, but it just so happens that the string already matched a class defined in the CSS Modules ('button') so everything works fine. Example below:
@thejamespower Thank you for your issue and PR! And I'm sorry for the late reply.
Yes, classnames/bind returns a string class when it is not defined in CSS Modules!
// without typed-classnames-loaderimportstylefrom'./empty.css';importclassNamesBindfrom'classnames/bind';constcx=classNamesBind.bind(style);cx('default-button');// 'default-button'
However, if we accept string type like your PR (#3), we can put string not defined in style. I think it will be less valuable as typed-classnames-loader because TypeScript never throw error.
So I think it will be better to use both classnames/bind and classnames !
// with typed-classnames-loaderimport{classNames,classNamesBind}from'./style.css';classNames('default-button',classNamesBind({button: true,}));// 'default-button button--from--css-modules'
cx is short-hand of classNamesBind and cn is one of classNames.
// with typed-classnames-loaderimport{cn,cx}from'./style.css';cn('default-button',cx({button: true,}));// 'default-button button--from--css-modules'
When using ClassNamesBind, you should be able to pass a string class straight through to the component. In all examples you do this, but it just so happens that the string already matched a class defined in the CSS Modules ('button') so everything works fine. Example below:
const buttonClass = classNamesBind('default-button', { button: true, });
This should apply
.default-button
in vanilla HTML/CSS and.button
from the CSS modules.The text was updated successfully, but these errors were encountered: