Merging non class name styles

[James Sear]

I'm looking to create a HOC that can take string props, turn them into relevant styles and pass them in to be merged with the child component. I'm wondering if I can achieve this with themr.

Here is an example:

Child:

import styles from 'styles.scss'

@withPropsStyles
@themr(styles)
class Child extends Component {
  render () {
    return <p className={this.props.theme.wrapper}>{this.props.children}</p>
  }
}

HOC:

const withPropsStyles = ChildComponent => {
  return class extends Component {
    constructor () {
      const styles = {
        wrapper: {
          marginTop: this.props.marginTop 
        }
      }
    }
    render () {
      return <ChildComponent theme={styles.wrapper} />
    }
  }
}
export default themr(withPropsStyles, styles)

Loading:

<Child marginTop='2em' />

In reality, I want a consistent API across different components to tweak similar styles (I wouldn't pass actual values into props—like above—but modifiers), but the premise is the same.

• Am I approaching this correctly?
• Can I use the styleName decorator with themr?

[Kirill Agalakov]

@jpsear This is not supported out of the box and in my opinion is out of scope of this library.
However such feature has already been requested in #2 and there are some thoughts on details of implementation with moving merging strategy to an abstraction. To sum up this is still to be done.

[Kirill Agalakov]

I believe it's a fine place to track this request taking #2 into account.

Edit: I'm trying to find some time to rewrite themr to typescript at first. I think after that some more investigation of this issue could be done.

[Javi Velasco]

👍 !!