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
Having some trouble understanding how to implement react-themeable on a more complex example. Here's an example of a button component that could be either a <button> or an <a>, and has multiple variant style options (note: I am using CSS Modules):
importReact,{Component}from'react';importclassNamesfrom'classnames/bind';importstylefrom'./style.css';classButtonextendsComponent{render(){//destructured propsconst{href, primary, secondary, success, warning, ...others}=this.props;//determine what element to use based on if href was passed inconstelement=href ? 'a' : 'button';//use ClassNames package to determine variant style to use, primary being defaultvarcx=classNames.bind(style);letclassName=cx({primary_outline: !secondary&&!success&&!warning,secondary: secondary,success_outline: success,warning_outline: warning});//append this.props.className if passed inif(this.props.className)className+=` ${this.props.className}`;//make props variable to hold and send into React.createElementconstprops={
...others,
href,
className
}//create elementreturnReact.createElement(element,props,children);}}
I'm having trouble implementing theme into the const props object. I tried:
constprops={theme: theme(1,'button')}
But that didn't work, said 'button' didn't exist.
I'm also unsure how to apply variant possibilities into the second theme parameter.
...Unless, instead of making a single <Button /> component, it instead makes more sense to create, say, <ButtonPrimary />, <ButtonSecondary />, etc. But that seems a little overkill?
If these things aren't possible yet, I'm willing to see what I can to to contribute to make them possible, but want to make sure it's not my own ignorance before diving into source.
The text was updated successfully, but these errors were encountered:
Having some trouble understanding how to implement react-themeable on a more complex example. Here's an example of a button component that could be either a
<button>
or an<a>
, and has multiple variant style options (note: I am using CSS Modules):I'm having trouble implementing theme into the
const props
object. I tried:But that didn't work, said 'button' didn't exist.
I'm also unsure how to apply variant possibilities into the second theme parameter.
...Unless, instead of making a single
<Button />
component, it instead makes more sense to create, say,<ButtonPrimary />
,<ButtonSecondary />
, etc. But that seems a little overkill?If these things aren't possible yet, I'm willing to see what I can to to contribute to make them possible, but want to make sure it's not my own ignorance before diving into source.
The text was updated successfully, but these errors were encountered: